Question

我想在加载时在页面上弹出叠加层。不幸的是，此代码打破了页

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>LIGHTBOX EXAMPLE</title>
        <style>
        .black_overlay{
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index:1001;
            -moz-opacity: 0.8;
            opacity:.80;
            filter: alpha(opacity=80);
        }
        .white_content {
            display: none;
            /*position: absolute;

            top: 20%;
            left: 25%;   */
margin-left: auto;
margin-right: auto;
margin-top: 75;

            width: 685px;
            height: 496px;
            /*border: 10px solid black; */
            background-color: black;
            z-index:1002;
            overflow: auto;
        }
    </style>
    </head>
    <body>
        <p>This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p>
        <div id="light" class="white_content">


<iframe src="iframe.html" width="100%" height="100%" name="frame1" id="frame1" scrolling="auto" frameborder="0"></iframe> 


    </div>
        <div id="fade" class="black_overlay"></div>
    </body>
</html>

使用alsone时效果很好，但是当我将它添加到真实页面时，它有点破裂。叠加层显示在页面下方，而不是页面中。

有任何建议如何解决？

编辑：这没有帮助：试试这个例子，你会知道我的意思。叠加层显示在内容下方，但它应该覆盖它并显示在页面中间。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>LIGHTBOX EXAMPLE</title>
        <style>
        .black_overlay{
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index:1001;
            -moz-opacity: 0.8;
            opacity:.80;
            filter: alpha(opacity=80);
        }
        .white_content {
            display: none;
            position :relative;
            /*position: absolute;

            top: 20%;
            left: 25%;   */
margin-left: auto;
margin-right: auto;
margin-top: 75;

            width: 685px;
            height: 496px;
            /*border: 10px solid black; */
            background-color: black;
            z-index:1002;
            overflow: auto;
        }
    </style>
    </head>
    <body>

    Kinds of kitchen units

The two main categories of kitchen units are:

Base units – Ground-level units that support worktops, sinks and major appliances.
Wall units – Mainly used for storage space, these units frequently stand at eye-level.

Almost instantly, you’ll notice that there is a dizzying array of supplies to choose from when choosing the proper kitchen unit for you. You will find veneers, hardwoods, laminated finishes, lacquered finishes, and many more additionally to a nearly unlimited price range. You will find styles to suit any home and taste, whether or not you have a minimalist contemporary home or if you have a home that was built centuries ago. You might be able to discover matching kitchen base units and kitchen wall units for your application for less than a thousand pounds, or you might be looking to spend hundreds of thousands on rare, exotic, custom-built solutions.

Kitchen units and kitchen style
Most companies provide many different lines and price classes, so do not write off a manufacturer merely simply because 1 of their kitchen ranges is an excessive amount of or too small. No matter where you lie on the spectrum, make certain to select a retailer or contractor who specializes in kitchen units in your price range so you get the very best selection.

Some kitchen units are sold in a ready to assemble kit, so you can save cash by installing them yourself rather of hiring a professional to do so. When you have better carpentry skills, you may wish to install your personal kitchen units anyway either to save money, have enjoyable, or put your own individual touch on the project. You need to determine which approach you’re going to take before you start shopping for kitchen units.

High quality and maintenance problems
When shopping for your kitchen, you might discover it odd that many retailers and contractors carry separate doors and boxes, and extremely few completed kitchen units. They do this so that they are able to provide a broad selection with out getting to stock a tremendous, impossible to manage inventory. Also, you might find that completed kitchen units don’t have that unique spark or character that you’re searching for, so you may wind up becoming much better served by getting the capability to mix and match parts to your heart’s content. Numerous kitchen units are built to a handful of well-liked dimensions, so it’s easy to produce the precise appear you want.

If you are dead set on replacing your old kitchen units in their entirety, it may be wise to investigate the possibility of buying some used kitchen units. These can often be had for a fraction of the cost of new units and, with a little creativity, can breath new life into a kitchen layout and style.


        <p>This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p>
        <div id="light" class="white_content">


<iframe src="iframe.html" width="100%" height="100%" name="frame1" id="frame1" scrolling="auto" frameborder="0"></iframe> 


    </div>
        <div id="fade" class="black_overlay"></div>
    </body>
</html>

所以我添加了一个虚拟文本。

Answer 1

// Add position:relative; to .white_content`

iframe需要是position：absolute;坐在其他内容之上。将顶部和左侧设置为50％以使iframe的左上角居中。然后将顶部/左侧边距设置为高度的一半，将宽度的一半设置为整个iframe的中心。 演示： http://jsfiddle.net/H5Vpd/2/

将此css添加到.white_content：

position: absolute;
top: 50%;
left: 50%; 
margin-top:-248px;
margin-left:-342px;

Javascript叠加打破了我的页面

1 个答案: