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>
ralphm
June 16, 2012, 2:46am
2
Opacity is inherited, so you can’t reverse this on inner elements. (opacity: 1 on an inner element means “use the full opacity that I’ve inherited”, which is 75%.)
You could take the inner element out of the outer div and fake its position with position: absolute etc.
What about another position:fixed; div? A div for the transparency and one for the solid. It seems to work. How would the position:absolute; be coded?
Current 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>
ralphm
June 16, 2012, 2:57am
4
It might help to know what you are trying to achieve. I don’t see much when I load your code into my browser, so it’s not clear what you aim is. There may be some better solutions.
Thanks for asking.
I need a popup div that’s opake, that I can fill with a few buttons and instructions, surrounded by what appears as a transparent margin, that’s actually a huge transparent div that fills the display behind the opake white div.
ralphm
June 16, 2012, 3:11am
6
That seems to be what your second example code does … unless I’m misunderstanding.
Yes, you’re understanding is correct.
What did you have in mind with the position: absolute option?
ralphm
June 16, 2012, 3:30am
8
Ah, don’t worry … I was thinking of a different scenario when an outer element has an opacity setting and an inner element needs to be opaque. I don’t think it applied here, now that I see what you are doing.
Then it’s time to call it a day.
Thanks for making it possible to sleep tonight.
I hope you have a good night also.
Thanks again ralph.m.