Can't get #firstPopupDiv to 100% opacity

**nichemtktg** · Jun 15, 2012 18:59

I can't get opacity of #firstPopupDiv to over ride the opacity of #outer.

What am I missing?

HTML 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_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>

**ralph.m** · Jun 15, 2012 19:46

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.

**nichemtktg** · Jun 15, 2012 19:52

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:

HTML 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>

**ralph.m** · Jun 15, 2012 19:57

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.

**nichemtktg** · Jun 15, 2012 20:06

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.

**ralph.m** · Jun 15, 2012 20:11

That seems to be what your second example code does ... unless I'm misunderstanding.

**nichemtktg** · Jun 15, 2012 20:16

Yes, you're understanding is correct.

What did you have in mind with the position: absolute option?

**ralph.m** · Jun 15, 2012 20:30

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.

**nichemtktg** · Jun 15, 2012 20:33

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.

User Tag List

Thread: Can't get #firstPopupDiv to 100% opacity

Thread Tools

Display

Can't get #firstPopupDiv to 100% opacity

Bookmarks

Bookmarks

Posting Permissions