javascript custom alert box transparency issue

I'm trying to do an image-based custom alert box using CSS and Javascript. I almost have it working the way I want it to. The issue that's been plaguing me is that box is sharing the overlay's transparency. Setting the box' opacity does nothing and removing the box code from its overlay "nest" makes the overlay cover the box even if the z-index is set up otherwise.

Here should be the relevant CSS Code:

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

Here's the 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"); = "inline"; = "inline"; } function DlgHide(){ var Dlg_bg = document.getElementById("popUpDisplay"); var Dlg = document.getElementById("popUpTemplate"); = "none"; = "none"; }

And here's the 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>

It's not pretty, and I need to work on the message displayed, but I just want to get it so it displays correctly.


This is because your content div is a child of the transparent div. (And thus inherits the opacity from #popUpDisplay.) Which is why frameworks like Bootstrap place a modal-overlay before (not around) the content div of a modal.

I would just update your CSS to use rgba on the background of #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 custom alert box transparency issue