Question

我尝试使用CSS和Javascript进行基于图像的自定义提醒框。我几乎让它以我想要的方式工作。一直困扰着我的问题是，盒子正在分享叠加层的透明度。设置框＆＃39;不透明度不会做任何事情，并从其叠加中移除盒子代码＆＃34; nest＆＃34;即使设置了z-index，覆盖也会覆盖框。

这应该是相关的CSS代码：

#popUpDisplay {
    display: none;
    opacity: .8;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: lightgray;
    z-index: 8;
}

#popUpTemplate {
    display: none;
    opacity: 1.0;
    z-index: 10;
}

#popUpBackground {
    display: block;
    margin-top: 10%;
    margin-left: auto;
    margin-right: auto;
    width: 495px;
    height: 450px;
    padding-top: 1px;
    background-image: url("../images/popUp_bg.png");
    text-align: center;
    z-index: 10;
}

#popUpBanner {
    width: 455px;
    height: 86px;
    margin-left: auto;
    margin-right: auto;
    background-image: url("../images/popUp_banner.png");
    text-align: center;
}

#bannerText {
    /* May switch to image */
    color: white;
    margin-top: 10px;
    padding-top: auto;
    padding-bottom: auto;
}

#popUpContent {
    width: 450px;
    height: 347px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

这是Javascript：

function DlgShow(Message){
  // Change the message.
  var Msg = document.getElementById("DlgContent");
  Msg.innerHTML = Message;

  // Display the dialog box.
  var Dlg_bg = document.getElementById("popUpDisplay");
  var Dlg = document.getElementById("popUpTemplate");
  Dlg_bg.style.display = "inline";
  Dlg.style.display = "inline"; 

}


function DlgHide(){
    var Dlg_bg = document.getElementById("popUpDisplay");
    var Dlg = document.getElementById("popUpTemplate");
    Dlg.style.display = "none";
    Dlg_bg.style.display = "none";

}

这是HTML

<div id="popUpDisplay">
    <div id="popUpTemplate">
        <div id="popUpBackground">
            <div id="popUpBanner">
                <h3 id="DlgContent">Test Text</h3>
            </div>
            <div id="popUpContent">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rutrum risus metus, a vehicula nibh molestie ac. Duis sollicitudin libero eget nunc maximus auctor. Sed eu commodo arcu. Quisque finibus pellentesque pharetra. Vestibulum quam mi, malesuada vitae sem eget, eleifend mattis nisi. Nunc ac tristique nunc. Morbi blandit justo eleifend dui malesuada, quis varius diam tincidunt. Quisque gravida posuere urna eget ultricies. Nullam ut euismod lectus. Donec congue ex quis elementum dignissim.</p>

                <a href="javascript:DlgHide.ok();"> Close</a>
            </div>
        </div>
    </div>
</div>

    <h1>HTML Test Page</h1>
    <p>This Page is strictly for testing things on a page without effecting a pre-existing page.</p>

    <a href="javascript:DlgShow();">Open</a>

它不漂亮，我需要处理显示的消息，但我只想得到它以便正确显示。

Answer 1

这是因为您的内容div是透明div的子级。（因此从opacity继承#popUpDisplay。这就是为什么像Bootstrap这样的框架在模态的内容div之前（不在其周围）放置模态覆盖的原因。

我只是在rgba的背景下更新您的CSS以使用#popUpDisplay：

#popUpDisplay{
  display: none;
  /* opacity: .8; <-- remove this */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(211, 211, 211, .8); /* <-- change this*/
  z-index: 8;
}

javascript自定义提醒框透明度问题

1 个答案: