I want to pop the overlay over the page when it loads. Unfortunately this code breaks page.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
开发者_Python百科<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>
Works just fine when using alsone, but when I add it to the real page it kinda breaks. The overlay is being displayed under the page, not in the page.
Any advice how to fix it?
edit: That did not help: Try this example and you will know what I mean. The overlay gets displayed under the content, but it should go over it and appear in the middle of the 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 :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>
So I added a dummy text.
// Add position:relative; to .white_content`
The iframe needs to be position:absolute; to sit on top of other content. Set top and left to 50% to center the top/left corner of the iframe. Then set the top/left margins as half the height and half the width to center the whole iframe. Demo: http://jsfiddle.net/H5Vpd/2/
Add this css to .white_content:
position: absolute;
top: 50%;
left: 50%;
margin-top:-248px;
margin-left:-342px;
![Interactive visualization of a graph in python [closed]](https://www.devze.com/res/2023/04-10/09/92d32fe8c0d22fb96bd6f6e8b7d1f457.gif)
加载中,请稍侯......
精彩评论