Question

如何像gmail一样制作模态弹出窗口（当我们尝试上传exe弹出窗口时会生成封面滚动条）

Answer 1

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，它会为您完成所有艰苦的工作。

Answer 2

查看jQuery的以下模态对话框插件：

Answer 3

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

Answer 4

如果您只需要一个简单的文字对话框，请查看modal option in jQuery UI Dialog或JavaScript alert()功能。

模态弹出像谷歌

4 个答案: