Jump to content

Can't get #firstPopupDiv to 100% opacity SOLVED with thanks in the final post


niche
 Share

Recommended Posts

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 by niche
Link to comment
Share on other sites

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

Then how would you approach making the #firstPopupDiv solid white (0% transparency)?

Link to comment
Share on other sites

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 by niche
Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...