如何通过模态弹出模拟浏览器？

Question

正如标题所示，我想通过我网站上的模态弹出窗口模拟浏览器（或窗口程序）。它不需要可拖动或可调整大小，我只是在制作这个＆＃34;框架＆＃34;时遇到了麻烦。在弹出窗口周围，以便滚动内容和顶部（关闭＆＃34; X＆＃34;图标和＆＃34;程序＆＃34; -name）也不会滚动。

我有什么建议可以实现这个目标吗？

Answer 1

如果我理解正确，您希望显示包含可滚动框架的弹出窗口，其中关闭按钮且标题部分不滚动？

您可以使用html和css（working example）创建弹出窗口。如果需要，您可以轻松地将iframe更改为普通内容div。

html代码

<div id="popup" style="display:none;">
    <div class="overlay"></div>
    <div class="box">
        <div class="close">x</div>
        <div class="frame">
            <div class="title">Title</div>
            <iframe src="http://doc.jsfiddle.net/"></iframe>
        </div>
    </div>
</div>

css代码

/* full screen dark overlay */
 .overlay {
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 100%;
}
/* full screen popup */
 .box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* round black close button */
 .close {
    /* at the top right */
    position: absolute;
    top: 30px;
    right: 30px;
    z-index: 102;
    /* in front of the frame */
    /* round black */
    width: 20px;
    height: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    background-color: #000;
    color:#fff;
    cursor: pointer;
    text-align:center;
}
/* contains the title and frame */
 .frame {
    position: absolute;
    top: 20px;
    right: 20px;
    bottom: 20px;
    left: 20px;
    z-index: 100;
}
/* The title */
 .frame .title {
    background-color: #fff;
    padding:10px;
}
/* The iframe for your content */
 .frame iframe {
    width: 100%;
    height: 400px;
    border: none;
}

高级选项

如果你需要更多高级选项，例如不滚动背景体，非全屏弹出，中心等，你可以检查弹出插件。您可以查看我的jquery插件GenericBox以获取示例代码，或者还有其他一些插件可用于其他选项。