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

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


  • How might you add user controls to a window dynamically
  • Enumerating Controls on a Form
  • HTML5 video only works in IE. The other browsers shows the black screen
  • MeeGo Handset Emulator not starting on Windows 7
  • C++ friend class std::vector
  • Knockout custom binding handler
  • Using $compile in a directive triggers AngularJS infinite digest error
  • converter json to two dimensional array
  • How to make Twilio api Post request with the help of AFNetworking?
  • Unable to send e-mail through Java
  • didUpdatePushCredentials not get called
  • order post according to custom array position
  • UIAlertController button function not working
  • SetWindowsHookEx does not react on media keys
  • Element.tagName for python not working
  • Graphics.CopyFromScreen [Web application] + The handle is invalid
  • How solve “Qt: Untested Windows version 10.0 detected!”
  • Install PHP intl extension on MacOS
  • Retrieve list of sent friend requests from friend_request FQL table
  • JQuery Internet Explorer and ajaxstop
  • JSON response opens as a file, but I can't access it with JavaScript
  • Avoid links criss cross / overlap in d3.js using force layout
  • NHibernate Validation Localization with S#arp Architecture
  • How can I send an e-mail from a vbs script
  • What is the “return” in scheme?
  • jQuery show() function is not executed in Safari if submit handler returns true
  • Accessing IRQ description array within a module and displaying action names
  • Change an a tag attribute in JavaScript based on screen width
  • 0x202A in filename: Why?
  • Traverse Array and Display in markup
  • Transpose CSV data with awk (pivot transformation)
  • Why can't I rebase on to an ancestor of source changesets if on a different branch?
  • using HTMLImports.whenReady not working in chrome
  • Getting Messege Twice Using IMvxMessenger
  • Authorize attributes not working in MVC 4
  • EntityFramework adding new object to nested object collection
  • Binding checkboxes to object values in AngularJs
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?