niche Posted June 16, 2012 Share Posted June 16, 2012 (edited) I can't get opacity of #firstPopupDiv to over ride the opacity of #outer. What am I missing? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Untitled Document</title><script type="text/javascript">function popup(popup_name) { popup_elem=document.getElementById(popup_name); popup_elem.style.display == 'block' ? popup_elem.style.display = 'none' : popup_elem.style.display = 'block';}</script><style type="text/css">#outer {position:fixed; top:0; left:0; width:100%; height:100%; display:none; background-color:#000; opacity: .75; }.middle {height:100%; display:table; margin:0 auto;}.inner {vertical-align:middle; display:table-cell;}#firstPopupDiv {width:200px;height:200px;background-color:white;margin:0px 0px 0px 0px;opacity:1.0; }</style></head><body><div style="width:730px;margin:0 auto;"> <button onclick="popup('outer')" style="width:730px;height:60px;font-size:30px;margin:200px 0px 0px 0px;">Send to Printer</button></div><div id="outer" onclick="popup('outer')"> <div class="middle"> <div class="inner"> <div id="firstPopupDiv"> <p>You are here.</p> </div> </div> </div></div></body></html> Edited June 16, 2012 by niche Link to comment Share on other sites More sharing options...
Ingolme Posted June 16, 2012 Share Posted June 16, 2012 That's because the opacity of an element is multiplied by the opacity of the parent element. 100% (1.0) of 0.75 is still 0.75. Elements inside an element with opacity cannot have an opacity higher than the value that was set on the parent. Link to comment Share on other sites More sharing options...
niche Posted June 16, 2012 Author Share Posted June 16, 2012 Then how would you approach making the #firstPopupDiv solid white (0% transparency)? Link to comment Share on other sites More sharing options...
niche Posted June 16, 2012 Author Share Posted June 16, 2012 (edited) Thanks again for your advice. I reworked my code so it does what I need it to do. I created a div for the transparency and one for the solid. Reworked code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Untitled Document</title><script type="text/javascript">function popup() { popup_elem=document.getElementById('outer'); popup_elem.style.display == 'block' ? popup_elem.style.display = 'none' : popup_elem.style.display = 'block';popup_elem=document.getElementById('outer2'); popup_elem.style.display == 'block' ? popup_elem.style.display = 'none' : popup_elem.style.display = 'block';}</script><style type="text/css">#outer {position:fixed; top:0; left:0; width:100%; height:100%; display:none; background-color:#000; opacity: .75; }#outer2 {position:fixed; top:0; left:0; width:100%; height:100%; display:none; }.middle {height:100%; display:table; margin:0 auto;}.inner {vertical-align:middle; display:table-cell;}#firstPopupDiv {width:200px;height:200px;background-color:white;}</style></head><body><!--<h1 style="float:left;"><a href="javascript:void(0);" onclick="popup('outer')">Click Here To Open The Pop Up</a></h1>--><div style="width:730px;margin:0 auto;"> <button onclick="popup()" style="width:730px;height:60px;font-size:30px;margin:200px 0px 0px 0px;">Send to Printer</button></div><div id="outer" onclick="popup()"></div><div id="outer2" onclick="popup()"> <div class="middle"> <div class="inner"> <div id="firstPopupDiv"> <p>You are here.</p> </div> </div> </div></div></body></html> Edited June 16, 2012 by niche Link to comment Share on other sites More sharing options...
niche Posted June 16, 2012 Author Share Posted June 16, 2012 Thanks Ingolme for your help on this. It was close to bedtime and you helped me finish the day with no regrets. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now