html - javascript custom alert box transparency issue -

i'm trying image-based custom alert box using css , javascript. have working way want to. issue that's been plaguing me box sharing overlay's transparency. setting box' opacity nothing , removing box code overlay "nest" makes overlay cover box if z-index set otherwise.

here should 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 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 javascript:

function dlgshow(message){   // change message.   var msg = document.getelementbyid("dlgcontent");   msg.innerhtml = message;    // display 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 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, 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 strictly testing things on page without effecting pre-existing page.</p>      <a href="javascript:dlgshow();">open</a> 

it's not pretty, , need work on message displayed, want displays correctly.

this because content div child of transparent div. (and inherits opacity #popupdisplay.) why frameworks bootstrap place modal-overlay before (not around) content div of modal.

i update css use rgba on background of #popupdisplay:

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