javascript - 模态弹出像谷歌

标签 javascript jquery ajax

如何制作类似gmail的模态弹出窗口(当我们尝试上传exe时生成的弹出窗口覆盖页面的滚动条)

最佳答案

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

关于javascript - 模态弹出像谷歌,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3069250/

相关文章:

javascript - 通过 AJAX 提交表单但保留客户端验证

javascript - 如何检测 css3 过渡何时结束

javascript - 箭头键导航不会移动到 TABLE 中附加的 TR

javascript - jquery UI 不会在新的 DOM 元素上执行

javascript - 什么可能导致 XMLHttpRequest 在 Firefox 中永远不会改变状态?

javascript - 如何使用 greasemonkey/tampermonkey 从一个页面复制 <div> 元素并将其粘贴到另一个页面?

javascript - Wordpress Contact-form 7 - 使用 Jquery 的预订表单功能

javascript - HTML 表单提交到数据库并重定向到感谢页面

javascript - AJAX 请求返回双倍对象列表 - YUI

javascript - RxJS 在事件上发送多个唯一的 ajax 请求