0
我想在加载页面时弹出叠加层。 不幸的是，这段代码打破了页面。JavaScript叠加打破了我的页面
<!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>
因此我添加了一个虚拟文本。
提示：添加HTML，CSS和JS而是jsfiddle.net在你的问题张贴的。这节省了空间并允许其他开发人员在线编辑您的代码以帮助找到答案。更新小提琴：http://jsfiddle.net/H5Vpd/1/ – marissajmc