Непрозрачность на IFRAME с DIV перед

Question

Привет, я знаю, что это хорошо известно, проблема, но я пытаюсь сделать это без какого-либо успеха:

Добавить полноэкранное IFRAME с непрозрачностью и отобразить DIV выше без этой непрозрачности как модальный диалог. Я знаю, что помутнение является проблемой, поскольку она применяется к детям, но если я использую RGBA на IFRAME не работает слишком

Мой 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;} 

И мой 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> 

Вот это jsfiddle http://jsfiddle.net/DDK5g/

Спасибо за вашу любезную помощь

Answer 1

Вам нужно добавить z-index к #launch_wrapper стоимости 9999.

Но для этого должны быть включены вам нужно будет добавить position:absolute к #launch_wrapper что вызовет очередной выпуск не центрирования содержимого.

Для этого вам нужно добавить top:0;left:0;right:0;bottom:0;margin: auto;

Так что ваш #launch_wrapper CSS будет выглядеть следующим образом

#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; 
}