设置display为block后Modal仍无法显示的技术求助

DevOps 小满

2026-6-18

问题描述

我正在开发一个Hello World页面，添加了若干CSS动画，并实现了点击按钮弹出Modal的功能。该按钮带有闪烁动画，仅在用户输入文本后显示。

最初尝试在用户输入姓名时直接触发Modal，之后改为通过按钮触发，但问题仍未解决。将Modal的display设置为block后，打印该属性值显示为block，但Modal实际并未出现。试过直接打印Modal的display属性、不设置display为none、修改overflow:hidden属性等方法，也尝试了所有AI推荐的修改方案，均无效。

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);
            });
        }
    });
});

解决方案

问题根源

层级覆盖：Modal的.popUp设置的z-index:1，而页面中.sent1、.sent2等元素的z-index:3，且这些元素为绝对定位，导致Modal被遮挡在下方，无法显示。
全局样式污染：*选择器给所有元素设置了background-color: #A24545，会覆盖Modal内部元素的背景色设置，即使Modal显示也可能看不到正确样式。

修改步骤

提升Modal层级：将.popUp的z-index改为足够大的值（如9999），确保它在所有页面元素之上：

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

修复全局背景色：将*选择器中的background-color移到body或.container中，避免污染Modal内部元素：

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

body {
    background-color: #A24545; /* 将背景色设置在body上 */
}

完成以上修改后，点击按钮即可正常显示Modal。

内容的提问来源于stack exchange，提问作者Ajai Arjun

设置display为block后Modal仍无法显示的技术求助

CSS代码 #

HTML代码 #

JS代码 #

问题根源 #

修改步骤 #

CSS代码

HTML代码

JS代码

问题根源

修改步骤