Javascript覆盖破坏了我的页面
[英]Javascript overlay breaks my page
问题描述
我想在加载时在页面上弹出叠加层。 不幸的是，这段代码中断了页面。
<!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>
因此，我添加了一个虚拟文本。
1 个解决方案
解决方案1
0 2011-09-04 23:56:48
// 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;
我的布局在IE7中中断并且javascript页面重新加载使屏幕闪烁
[英]my layout breaks in IE7 and javascript page reloads make the screen blink
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.