不透明度與

Question

喜的前一個div的iframe我知道這是一個衆所周知的問題，但我嘗試這樣做沒有任何成功：

添加一個全屏的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

您需要添加的價值9999

一個z-index到#launch_wrapper但對於這個被激活，您需要添加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; 
}