Question

我在我的网站上使用这个由html和css制作的模态框。事实证明主要部分很好，但我对背景淡化有问题。

它以某种方式淡化了显示在框位置（在代码中）的网站部分的背景。我使用ID来识别菜单中链接的网站部分（这是一页的网站）。

包含模式框的部分下方的所有部分都不会褪色。

以下是一些代码：

    <div class="wrapper">

            <a href="#modal" class="btn go">            
            <img src="img/i3.1.jpg" alt="image" />
            </a>

 <div id="modal">
    <link href="css/modal.css" rel="stylesheet">
    <div class="modal-content">
        <div class="header">
            <h2>Modal Heading</h2>
        </div>
        <div class="copy">
            <p>Sample text in modal</p>
        </div>
        <div class="cf footer">
            <a href="#team" class="btn">Close</a>
        </div>
    </div>
    <div class="overlay"></div>
</div>

CSS：

#modal {
left:50%;
margin:-250px 0 0 -40%;
opacity: 0;
position:absolute;
top:-50%;
visibility: hidden;
width:80%;
box-shadow:0 3px 7px rgba(0,0,0,.25);
box-sizing:border-box;
transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}

#modal:target {
    opacity: 1;
    top:50%;
    visibility: visible;
}

#modal .header,#modal .footer {
border-bottom: 1px solid #e7e7e7;
border-radius: 5px 5px 0 0;
}

#modal .footer {
    border:none;
    border-top: 1px solid #e7e7e7;
    border-radius: 0 0 5px 5px;
}
#modal h2 {
margin:0;
}
#modal .btn {
float:right;
}
#modal .copy,#modal .header, #modal .footer {
padding:15px;
}
.modal-content {
background: #f7f7f7;
position: relative;
z-index: 20;
border-radius:5px;
}
#modal .copy {
background: #fff;
}

#modal .overlay {
background-color: #000;
background: rgba(0,0,0,.5);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 10;
}

你能帮我解决这个问题吗？

非常感谢

/纳斯

HTML和CSS模式框褪色背景问题

0 个答案: