javascript - 显示内部 html 需要覆盖/灯箱

Question

我正在尝试创建一个叠加层来显示内部 html 页面。我从动态 DHTML 模式框开始，但代码对于 HTML5 浏览器来说已经过时(对于 MS Edge 没有正确显示)。我找到了一个叫做 LightBox 的东西，但它看起来只显示图像。

模态窗口:http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/dhtmlmodal.htm

灯箱:http://webdesign.tutsplus.com/articles/super-simple-lightbox-with-css-and-jquery--webdesign-3528

我想要的只是一个显示内部网页的 jquery 覆盖页面。有帮助吗？

Answer 1

这应该让你开始......

在您的样式部分添加:

        .overlay-background {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            height:100%;
            width: 100%;
            cursor: pointer;
            z-index: 1000; /* high z-index */
            background: #000; /* fallback */
            background: rgba(0,0,0,0.75);
        }

        .overlay-content 
        {
            display: block;
            background: #fff;
            padding: 1%;
            width: 40%;
            position: absolute;
            top: 15%;
            left: 50%;
            margin: 0 0 0 -20%;
            cursor: default;
            z-index: 10001;
            border-radius: 4px;
            box-shadow: 0 0 5px rgba(0,0,0,0.9);
        }

在您的 HTML 部分添加但请记住将 URL 更改为您想要显示的任何页面:

    <div class="overlay-content">
       <object type="text/html" data="https://www.google.com" style="width: 50%; height: 50%;"></object>
    </div>
    <div class="overlay-background">
    </div>