Question

嗨，我知道这是一个众所周知的问题，但我尝试这样做没有取得任何成功：

添加具有不透明度的全屏iframe，并在没有此不透明度的情况下显示上面的div，就像模式对话框一样。我知道不透明度是问题，因为它适用于孩子，但如果我在iframe上使用rgba它也不起作用

我的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添加到价值9999的#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;
}

在iframe上的不透明度与前面的div

1 个答案: