模式弹出像谷歌

问题描述：

如何使模式弹出，如Gmail（当我们试图上传exe文件生成弹出覆盖网页的滚动条）模式弹出像谷歌

答

看看下面的模式对话框插件的jQuery：

jqModal
ThickBox
BlockUI
jQuery UI Dialog
Facebox

答

看看在modal option in jQuery UI Dialog，或者如果你的JavaScript alert()功能只需要一个简单的文本对话框。

答

GMail运行在iframe上，覆盖div不在此iframe内，因此它位于iframe的顶部，因此位于滚动条顶部。从GMail的

代码

html, body { 
    height:100%; 
    margin:0; 
    overflow:hidden; /* no scrollbars (only in the iframe) */ 
    width:100%; 
} 

.cO { /* this is the iframe */ 
    height:100%; 
    width:100%; 
} 

.Kj-JD { 
    background-color:#C3D9FF; 
    border:1px solid #4E5766; 
    color:#000000; 
    outline:0 none; 
    padding:5px; 
    position:absolute; 
    top:0; 
    width:450px; 
    z-index:501; /* div stays on top */ 
} 

.Kj-JD-Jh { /* the shadow */ 
    background-color:#808080; 
    left:0; 
    position:absolute; 
    top:0; 
    z-index:500; 
}

样本HTML

<body> 
    <iframe class="cO">...</iframe> <!-- the scroll works on the iframe, not the body --> 
    <div class="Kj-JD"></div> <!-- outside the iframe --> 
    <div class="Kj-JD-Jh" style="opacity: 0.5; width: 1440px; height: 361px;"></div> <!-- black background --> 
</body>

要显示在上面一个div我建议jqModal，它所有为你努力工作。

你能告诉我一个你说的话的例子。 – 2010-06-18 12:15:01

我添加了gmail代码的一部分，body没有滚动，但iframe的确如此，div不在iframe内，这意味着它可以放在body内的任何东西的顶部，因此在滚动条。 – BrunoLM 2010-06-18 16:30:43

非常感谢BrunoLM – 2010-06-18 21:19:40

答

如果您只需要简单的文本对话框，请查看jQuery UI对话框或JavaScript alert（）函数中的模式选项。

相关推荐