CODEWITHSUNDEEP
htmlcssiframe
henri_1310
henri_1310

Reputation: 315

Opacity on iframe with a div in front of

Hi I know this is a well know issue but I try to do this without any success :

Add a fullscreen iframe with an opacity and display a div above without this opacity like a modal dialog. I know the opacity is the problem because it apply to the children but if I use rgba on the iframe it doesn't work too

My css

body {font-family: Helvetica,Verdana,Arial,Sans-Serif;;font-size: 62.5%;line-height: 1.7em;background:#ffffff;background-image:url(<?php bloginfo('stylesheet_directory'); ?>/images/bg-grey.png)}
iframe {overflow: hidden; height: 100%; position:fixed; top:0; left:0; right:0; bottom:0;background:#FFF;opacity:0.1;pointer-events: none;}

a {text-decoration: none;outline: none;}
#launch_wrapper {font-size: 1.3em;width: 600px;margin:12em auto 0; padding:1em 1em 1em 1em; height:16em; background:#ffffff;-moz-border-radius:6px;-khtml-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;border:2px solid #BCBCBB;color: #444;text-align: center;}
.content_wrapper {padding: 1em 0;color: #444;}
.p content_wrapper {color: #444;}

And my html :

<div id="launch_wrapper">
<div class="content_wrapper">
<h1 id="blog-title" class="blogtitle"><?php bloginfo('name') ?></h1>
<br />    

<h2>My title</h2>  
</div>
</div>    
<iframe src="http://www.mywebsite.com" sandbox="allow-same-origin allow-scripts" name="iframe" id="iframe" class="top-frame" frameborder="0" style="width:100%;" scrolling="no" allowtransparency=true></iframe>

Here is the jsfiddle http://jsfiddle.net/DDK5g/

Thanks for your kind help

Upvotes: 0

Views: 245

Answers (1)

anurupr
anurupr

Reputation: 2344

You need to add a z-index to #launch_wrapper of value 9999.

But for this to be enabled you would need to add position:absolute to #launch_wrapper which will cause another issue of not centering the content.

For that you need to add top:0;left:0;right:0;bottom:0;margin: auto;

So your #launch_wrapper css would look like this

#launch_wrapper {
   font-size: 1.3em;
   width: 600px;
   padding:1em 1em 1em 1em; 
   height:16em; 
   background:#ffffff;
   -moz-border-radius:6px;
   -khtml-border-radius:6px;
   -webkit-border-radius:6px;
   border-radius:6px;
   border:2px solid #BCBCBB;
   color: #444;
   text-align: center;
   z-index:9999;
   position:absolute;
   top:0;
   left:0;
   right:0;
   bottom:0;
   margin: auto;
}

Upvotes: 1

Related Questions