即使将显示设置为无也无法打开模型

问题描述 投票：0回答：1

我正在尝试制作一个简单的 hello world 页面。我为其添加了一些 css 动画，并实现了当用户单击按钮时弹出的模式。该按钮具有闪烁动画，仅在用户输入一些文本后才会出现。

我尝试首先在他们输入名字时触发它，但后来我将其更改为按钮，希望它能起作用。当我将 pop up.style.display 更改为 block 后打印 pop up.style.display 时，它就是 printng 块。但否则模态不会出现。

我尝试打印出模态显示以及直接打印模态而不将显示设置为无。但这没有用。我也尝试更改溢出隐藏属性但没有用。我尝试了人工智能建议的所有更改，但没有用。这是我的代码。

CSS

@font-face {
    font-family: Caveat;
    src: url("D:/Year 4/Term 1/Websites/Hello World/Caveat/static/Caveat-Regular.ttf");
}

* {
    background-color: #A24545;
    font-family: Caveat;
    font-size: 36px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    display: flex;
    position: relative;
    width: 1535px;
    height: 729px;
    overflow: hidden;
    margin: auto;
}

.tv-frame {
    width: 1100px;
    height: 630px;
    margin: auto;
    margin-top: 60px;
    padding: 20px;
    margin-left: 210px;
}

.small{
    width: 270px;
    height: 150px;
}

.mid{
    width: 305px;
    height: 180px;
}

.leftTV{
    top: 50px;
    left: -300px;
    position: absolute;
    animation: movearound 2s infinite;
    animation-timing-function: linear;
    visibility: hidden; 
    animation-play-state: paused;

}

.rightTV{
    bottom: 70px;
    right: -120px;
    position: absolute;
    mix-blend-mode: darken;
    animation: blink2 2s infinite;
    visibility: hidden; 
    animation-play-state: paused;
}

.topTV{
    top: -80px;
    right: 0px;
    position: absolute;
    mix-blend-mode: darken;
    animation: movearound2 2s infinite;
    animation-timing-function: linear;
    visibility: hidden; 
    animation-play-state: paused;
}

.bottomTV{
    bottom: -140px;
    left: -10px;
    position: absolute;
    animation: movearound3 2s infinite;
    visibility: hidden; 
    animation-play-state: paused;
}

.sent1{
    top: 250px;
    left: 610px;
    z-index: 3;
    position: absolute;
    color: aliceblue;
    background-color: transparent;
    text-align: center;
}

.sent2{
    top: 320px;
    left: 540px;
    z-index: 3;
    position: absolute;
    color: aliceblue;
    background-color: transparent;
    text-align: center;
}

.sent3{
    width: 370px;
    top: 390px;
    left: 490px;
    z-index: 3;
    position: absolute;
    border: none;
    text-decoration: none;
    background-color: transparent;
    color: aliceblue;
    outline: none;
    text-align: center;
}

.sent3::placeholder{
    color: aliceblue;
    background-color: transparent;
    opacity: 0.9;
    text-align: center;
}


.optional{
    font-size: 26px;
    z-index: 3;
    top: 480px;
    left: 580px;
    position: absolute;
    color: aliceblue;
    width: 200px;
    background-color: #000;
    border-radius: 5px;
    visibility: hidden;
    animation: blink 2s infinite; 
    animation-play-state: paused; 
    animation-timing-function: ease;
    text-align: center;
}

span{
    animation: blinkCursor 0.7s infinite; 
}

.popUp{
    z-index: 1;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%; 
    overflow: auto; 
    background-color: rgb(199, 199, 199);
}

.pop-content{
    background-color: rgb(54, 54, 54);
    margin: 15% auto;
    padding: 20px;
    width: 300px;
    height: 200px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.close{
    color: #7e7e7e;
    float: left;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
  color: #000;
}


#done {
    margin-top: 10px;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}

#done:hover{
    background-color:#000;
}

/* Fading transitions */
.fade-in {
    transition: opacity 0.5s ease-in;
    opacity: 1;
}

.fade-out {
    transition: opacity 0.5s ease-out;
    opacity: 0;
}

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes movearound {
    0% {
        top: 50px;
        left:-300px;
        transform: rotate(70deg);
    }
    50%{
        top: 150px;
        left: -180px;
        transform: rotate(0deg);
    }
    100% {
        top: 300px;
        left: -300px;
        transform: rotate(-70deg);
    }
}

@keyframes movearound2 {
    0% {
        transform: rotate(90deg);
        top: -260px;
    }
    50% {
        transform: rotate(0deg);
        top: -80px;

    }
    100% {
        transform: rotate(-90deg);
        top: -260px;
    }
}

@keyframes movearound3 {
    0% {
        bottom: -130px;
        left: -10px;
        transform: rotate(-30deg);
    }
    50% {
        bottom: -130px;
        transform: rotate(30deg);
    }
    100%{
        bottom: -130px;
        transform: rotate(-30deg);
    }
}


@keyframes blink2 {
    0% {
        transform: rotate(-30deg);
        content: url("D:/Year 4/Term 1/Websites/Hello World/images/retro TV.png");
    }
    50% {
        transform: rotate(30deg);
        content: url("D:/Year 4/Term 1/Websites/Hello World/images/Color TV.png");
    }
    100% {
        transform: rotate(-30deg);
        content: url("D:/Year 4/Term 1/Websites/Hello World/images/retro TV.png");
    }
} 

@keyframes blinkCursor {
    0% {
        border-color: transparent;
    }
    50% {
        border-color: aliceblue;
    }
    100% {
        border-color: transparent;
    }
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="helloWorld.css">
    <script src="./helloWorld.js"></script>
    <link rel="icon" href="D:/Year 4/Term 1/Websites/Hello World/images/tv.png" type="image/x-icon">
    <title>Hello World</title>
</head>
<body>
    <div class="container">
        <span class="sent1"></span>
        <span class="sent2"></span>
        <input type="text" class="sent3">
        <button class="optional text" id="pop-open">... is my name</button>
        <img src="./images/Retro-TV-Frame.png" alt="" class="image tv-frame">
        <img src="./images/retro TV.png" alt="" class="mid leftTV" style="mix-blend-mode: darken;">
        <img src="./images/retro TV.png" alt="" class="small rightTV" id="righttv">
        <img src="./images/Retro-TV-Frame.png" alt="" class="small topTV">
        <img src="./images/Retro-TV-Frame.png" alt="" class="mid bottomTV">
    </div>
    <div class="popUp" id="pop-up">
        <div class="pop-content">
            <span class="close">&times;</span>
            <h2>Welcome</h2>
            <p>I see. Hello</p>
            <button id="done">Thanks..</button>
        </div>
    </div>
</body>
</html>

JS

document.addEventListener('DOMContentLoaded', function() {
    const input = document.querySelector('.sent3');
    const optional = document.querySelector('.optional');
    const mainTv = document.querySelector('.tv-frame');
    const animatedElements = document.querySelectorAll('.leftTV, .rightTV, .topTV, .bottomTV');
    const textElement = document.querySelector('.sent1');
    const textElement2  = document.querySelector('.sent2');
    const textElement3  = document.querySelector('.sent3');

    const popUp = document.getElementById("pop-up");
    const close = document.querySelector(".close");
    const done = document.getElementById("done");
    const open = document.getElementById("pop-open");

    const text1 = "Hello Dear,";
    const text2 = "Welcome to our World";
    const text3 = "What was your Name again?";

    function typeWriter(element, text, speed = 200, isPlaceholder = false, callback = null) {
        let index = 0;

        function type() {
            if (index < text.length) {
                if (isPlaceholder) {
                    element.placeholder += text.charAt(index);
                } else {
                    element.textContent += text.charAt(index);
                }
                index++;
                setTimeout(type, speed);
            } else if (callback) {
                callback();  
            }
        }

        type();
    }

    typeWriter(textElement, text1, 200, false, function() {
        typeWriter(textElement2, text2, 200, false, function() {
            typeWriter(textElement3, text3, 200, true, function(){
                input.focus();
            });
        });
    });


    if(input){
        input.addEventListener('input', () => {
            if (input.value.trim() !== '' && input.value.length >= 4) {
                optional.style.visibility = 'visible'; 
                optional.style.animationPlayState = "running"; 
            } else {
                optional.style.visibility = 'hidden'; 
                optional.style.animationPlayState = "paused";
            }
        });
    }
    
    open.onclick = function() {
        popUp.style.display = "block";
        
      }

    close.addEventListener('click', function() {
        popUp.style.display = 'none'; 
    });

    done.addEventListener('click', function() {
        popUp.style.display = 'none'; 
    });

    document.addEventListener('mousemove', function(event) {
        const rect = mainTv.getBoundingClientRect();
        const x = event.clientX - 100;
        const y = event.clientY;
        const tvXMax = rect.right - 200;

        if (x >= rect.left && x <= tvXMax && y >= rect.top && y <= rect.bottom) {
            animatedElements.forEach(el => {
                el.style.visibility = 'visible';
                el.style.animationPlayState = 'running';
                el.classList.add('fade-in'); 
                el.classList.remove('fade-out'); 
            });
        } else {
            animatedElements.forEach(el => {
                el.style.animationPlayState = 'paused';
                el.classList.add('fade-out'); 
                el.classList.remove('fade-in'); 

                setTimeout(() => {
                    el.style.visibility = 'hidden';
                }, 400);
            });
        }
    });
});
javascript html css modal-dialog popup
1个回答
0
投票

您的模态样式有一些小问题。如果您使用 

dev tools
，您可以看到模态框正在显示，但位于红色部分的底部，这是因为您没有正确定位模态框。

要解决此问题，请添加 

position: absolute
和 
z-index: 10
。以下是所有新添加的代码和实例。

document.addEventListener('DOMContentLoaded', function() {
  const input = document.querySelector('.sent3');
  const optional = document.querySelector('.optional');
  const mainTv = document.querySelector('.tv-frame');
  const animatedElements = document.querySelectorAll('.leftTV, .rightTV, .topTV, .bottomTV');
  const textElement = document.querySelector('.sent1');
  const textElement2 = document.querySelector('.sent2');
  const textElement3 = document.querySelector('.sent3');

  const popUp = document.getElementById("pop-up");
  const close = document.querySelector(".close");
  const done = document.getElementById("done");
  const open = document.getElementById("pop-open");

  const text1 = "Hello Dear,";
  const text2 = "Welcome to our World";
  const text3 = "What was your Name again?";

  function typeWriter(element, text, speed = 200, isPlaceholder = false, callback = null) {
    let index = 0;

    function type() {
      if (index < text.length) {
        if (isPlaceholder) {
          element.placeholder += text.charAt(index);
        } else {
          element.textContent += text.charAt(index);
        }
        index++;
        setTimeout(type, speed);
      } else if (callback) {
        callback();
      }
    }

    type();
  }

  typeWriter(textElement, text1, 200, false, function() {
    typeWriter(textElement2, text2, 200, false, function() {
      typeWriter(textElement3, text3, 200, true, function() {
        input.focus();
      });
    });
  });


  if (input) {
    input.addEventListener('input', () => {
      if (input.value.trim() !== '' && input.value.length >= 4) {
        optional.style.visibility = 'visible';
        optional.style.animationPlayState = "running";
      } else {
        optional.style.visibility = 'hidden';
        optional.style.animationPlayState = "paused";
      }
    });
  }

  open.onclick = function() {
    popUp.style.display = "block";

  }

  close.addEventListener('click', function() {
    popUp.style.display = 'none';
  });

  done.addEventListener('click', function() {
    popUp.style.display = 'none';
  });

  document.addEventListener('mousemove', function(event) {
    const rect = mainTv.getBoundingClientRect();
    const x = event.clientX - 100;
    const y = event.clientY;
    const tvXMax = rect.right - 200;

    if (x >= rect.left && x <= tvXMax && y >= rect.top && y <= rect.bottom) {
      animatedElements.forEach(el => {
        el.style.visibility = 'visible';
        el.style.animationPlayState = 'running';
        el.classList.add('fade-in');
        el.classList.remove('fade-out');
      });
    } else {
      animatedElements.forEach(el => {
        el.style.animationPlayState = 'paused';
        el.classList.add('fade-out');
        el.classList.remove('fade-in');

        setTimeout(() => {
          el.style.visibility = 'hidden';
        }, 400);
      });
    }
  });
});
* {
  background-color: #A24545;
  font-family: Caveat;
  font-size: 36px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  position: relative;
  width: 1535px;
  height: 729px;
  overflow: hidden;
  margin: auto;
}

.tv-frame {
  width: 1100px;
  height: 630px;
  margin: auto;
  margin-top: 60px;
  padding: 20px;
  margin-left: 210px;
}

.small {
  width: 270px;
  height: 150px;
}

.mid {
  width: 305px;
  height: 180px;
}

.leftTV {
  top: 50px;
  left: -300px;
  position: absolute;
  animation: movearound 2s infinite;
  animation-timing-function: linear;
  visibility: hidden;
  animation-play-state: paused;
}

.rightTV {
  bottom: 70px;
  right: -120px;
  position: absolute;
  mix-blend-mode: darken;
  animation: blink2 2s infinite;
  visibility: hidden;
  animation-play-state: paused;
}

.topTV {
  top: -80px;
  right: 0px;
  position: absolute;
  mix-blend-mode: darken;
  animation: movearound2 2s infinite;
  animation-timing-function: linear;
  visibility: hidden;
  animation-play-state: paused;
}

.bottomTV {
  bottom: -140px;
  left: -10px;
  position: absolute;
  animation: movearound3 2s infinite;
  visibility: hidden;
  animation-play-state: paused;
}

.sent1 {
  top: 250px;
  left: 610px;
  z-index: 3;
  position: absolute;
  color: aliceblue;
  background-color: transparent;
  text-align: center;
}

.sent2 {
  top: 320px;
  left: 540px;
  z-index: 3;
  position: absolute;
  color: aliceblue;
  background-color: transparent;
  text-align: center;
}

.sent3 {
  width: 370px;
  top: 390px;
  left: 490px;
  z-index: 3;
  position: absolute;
  border: none;
  text-decoration: none;
  background-color: transparent;
  color: aliceblue;
  outline: none;
  text-align: center;
}

.sent3::placeholder {
  color: aliceblue;
  background-color: transparent;
  opacity: 0.9;
  text-align: center;
}

.optional {
  font-size: 26px;
  z-index: 3;
  top: 480px;
  left: 580px;
  position: absolute;
  color: aliceblue;
  width: 200px;
  background-color: #000;
  border-radius: 5px;
  visibility: hidden;
  animation: blink 2s infinite;
  animation-play-state: paused;
  animation-timing-function: ease;
  text-align: center;
}

span {
  animation: blinkCursor 0.7s infinite;
}

.popUp {
  display: none;
  position: absolute; /* Newly added */
  top: 0px; /* Newly added */
  z-index: 10; /* Newly added */
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(199, 199, 199);
}

.pop-content {
  background-color: rgb(54, 54, 54);
  margin: 15% auto;
  padding: 20px;
  width: 300px;
  height: 200px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.close {
  color: #7e7e7e;
  float: left;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: #000;
}

#done {
  margin-top: 10px;
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

#done:hover {
  background-color: #000;
}


/* Fading transitions */

.fade-in {
  transition: opacity 0.5s ease-in;
  opacity: 1;
}

.fade-out {
  transition: opacity 0.5s ease-out;
  opacity: 0;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes movearound {
  0% {
    top: 50px;
    left: -300px;
    transform: rotate(70deg);
  }
  50% {
    top: 150px;
    left: -180px;
    transform: rotate(0deg);
  }
  100% {
    top: 300px;
    left: -300px;
    transform: rotate(-70deg);
  }
}

@keyframes movearound2 {
  0% {
    transform: rotate(90deg);
    top: -260px;
  }
  50% {
    transform: rotate(0deg);
    top: -80px;
  }
  100% {
    transform: rotate(-90deg);
    top: -260px;
  }
}

@keyframes movearound3 {
  0% {
    bottom: -130px;
    left: -10px;
    transform: rotate(-30deg);
  }
  50% {
    bottom: -130px;
    transform: rotate(30deg);
  }
  100% {
    bottom: -130px;
    transform: rotate(-30deg);
  }
}

@keyframes blinkCursor {
  0% {
    border-color: transparent;
  }
  50% {
    border-color: aliceblue;
  }
  100% {
    border-color: transparent;
  }
}
<div class="container">
  <span class="sent1"></span>
  <span class="sent2"></span>
  <input type="text" class="sent3">
  <button class="optional text" id="pop-open">... is my name</button>
  <img src="./images/Retro-TV-Frame.png" alt="" class="image tv-frame">
  <img src="./images/retro TV.png" alt="" class="mid leftTV" style="mix-blend-mode: darken;">
  <img src="./images/retro TV.png" alt="" class="small rightTV" id="righttv">
  <img src="./images/Retro-TV-Frame.png" alt="" class="small topTV">
  <img src="./images/Retro-TV-Frame.png" alt="" class="mid bottomTV">
</div>
<div class="popUp" id="pop-up">
  <div class="pop-content">
    <span class="close">&times;</span>
    <h2>Welcome</h2>
    <p>I see. Hello</p>
    <button id="done">Thanks..</button>
  </div>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.