模态弹出像谷歌

Question

模态弹出像谷歌

如何制作像gmail一样的模态弹出窗口(当我们尝试上传exe弹出窗口的滚动条时)

Answer 1

GMail在a上运行,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;
}

Run Code Online (Sandbox Code Playgroud)

示例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>

Run Code Online (Sandbox Code Playgroud)

为了在顶部显示一个div我推荐jqModal,它会为你完成所有艰苦的工作.

Answer 2

Phi*_*ert 1

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

归档时间：	15 年，8 月前
查看次数：	4813 次
最近记录：	15 年，6 月前