Question

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

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

LightBox：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>

overlay / lightbox需要显示内部html

1 个答案: