Home>Web design tutorial>WEB standardization

Full-screen shielded and automatically centered lightBox

Author：Eve Cole Update Time：2009-07-27 17:14:47

[Browsers participating in the test: IE6/IE7/IE8/FF3.5/OP9.6/SF4/Chrome2]
[Operating system: Windows]

This tutorial aims to separate the style and behavior of lightBox and reduce JS work in various aspects (full screen masking, masking select in ie6, two-way centering, height adaptive content, etc.).

First the code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Chomo" />
<link rel="start" href=" http://www.14px.com " title="Home" />
<title>Full screen shielding, automatic centering lightBox</title>
<style type="text/css">
* { margin:0; padding:0; }
html,body { height:100%; overflow:hidden; font:12px/1.5 simsun;}
.myPage { line-height:3; overflow:auto; width:100%; height:100%;}
.lightBox,
.popupCover,
.popupIframe,
.popupComponent { position:absolute; left:0; top:0; width:100%; height:100%;}
.popupComponent { z-index:2; display:none;}
.popupIframe { display:none; _display:block; _filter:alpha(opacity=0);}
.popupCover { background:#000; opacity:0.7; *filter:alpha(opacity=70);}
.lightBox { text-align:center; overflow:auto;}
.lightBoxContent { display:inline-block; *display:inline; zoom:1; width:300px; padding:10px; background:#fff; border:5px solid #00b4ff; vertical-align:middle;}
.lightBoxMaxHeight { display:inline-block; vertical-align:middle; height:100%; *height:99.5%; width:1px; overflow:hidden; margin-left:-1px;}
.lightBoxWrapper { display:inline-block; *display:inline; zoom:1; text-align:left;}
.lightBoxClose { color:#f00;}
.lightBoxSubmit { margin-top:10px; padding-top:5px; border-top:1px solid #ccc;}
.lightBoxSubmit input { font-size:12px; padding:0 10px; overflow:visible; margin:0 5px;}
</style>
</head>
<body>
<div class="popupComponent" id="lightBox">
<iframe class="popupIframe"></iframe>
<div class="popupCover"></div>
<div class="lightBox">
<span class="lightBoxMaxHeight"></span>
<div class="lightBoxContent">
<div class="lightBoxWrapper">
The text is centered when the prompt is smaller than one line<br />
</div>
<div class="lightBoxSubmit">
<input type="button" value="OK" onclick="hideLayer('lightBox')" />
<input type="button" value="Cancel" onclick="hideLayer('lightBox')" />
</div>
</div>
</div>
</div>
<div class="popupComponent" id="lightBox2">
<iframe class="popupIframe"></iframe>
<div class="popupCover"></div>
<div class="lightBox">
<div class="lightBoxContent">
<div class="lightBoxWrapper">
When the content has exceeded the height of one screenWhen the content has exceeded the height of one screenWhen the content has exceeded the height of one screenWhen the content has exceeded the height of one screen<br />
When the content has exceeded the height of one screenWhen the content has exceeded the height of one screenWhen the content has exceeded the height of one screenWhen the content has exceeded the height of one screen<br />
When the content has exceeded the height of one screenWhen the content has exceeded the height of one screenWhen the content has exceeded the height of one screenWhen the content has exceeded the height of one screen<br />
When the content has exceeded the height of one screenWhen the content has exceeded the height of one screenWhen the content has exceeded the height of one screenWhen the content has exceeded the height of one screen<br />
When the content has exceeded the height of one screenWhen the content has exceeded the height of one screenWhen the content has exceeded the height of one screenWhen the content has exceeded the height of one screen<br />
When the content has exceeded the height of one screenWhen the content has exceeded the height of one screenWhen the content has exceeded the height of one screenWhen the content has exceeded the height of one screen<br />
When the content has exceeded the height of one screenWhen the content has exceeded the height of one screenWhen the content has exceeded the height of one screenWhen the content has exceeded the height of one screen<br />
When the content has exceeded the height of one screenWhen the content has exceeded the height of one screenWhen the content has exceeded the height of one screenWhen the content has exceeded the height of one screen<br />
When the content has exceeded the height of one screenWhen the content has exceeded the height of one screenWhen the content has exceeded the height of one screenWhen the content has exceeded the height of one screen<br />
When the content has exceeded the height of one screenWhen the content has exceeded the height of one screenWhen the content has exceeded the height of one screenWhen the content has exceeded the height of one screen<br />
When the content has exceeded the height of one screenWhen the content has exceeded the height of one screenWhen the content has exceeded the height of one screenWhen the content has exceeded the height of one screen<br />
When the content has exceeded the height of one screenWhen the content has exceeded the height of one screenWhen the content has exceeded the height of one screenWhen the content has exceeded the height of one screen<br />
When the content has exceeded the height of one screenWhen the content has exceeded the height of one screenWhen the content has exceeded the height of one screenWhen the content has exceeded the height of one screen<br />
When the content has exceeded the height of one screenWhen the content has exceeded the height of one screenWhen the content has exceeded the height of one screenWhen the content has exceeded the height of one screen<br />
When the content has exceeded the height of one screenWhen the content has exceeded the height of one screenWhen the content has exceeded the height of one screenWhen the content has exceeded the height of one screen<br />
When the content has exceeded the height of one screenWhen the content has exceeded the height of one screenWhen the content has exceeded the height of one screenWhen the content has exceeded the height of one screen<br />
When the content has exceeded the height of one screenWhen the content has exceeded the height of one screenWhen the content has exceeded the height of one screenWhen the content has exceeded the height of one screen<br />
When the content has exceeded the height of one screenWhen the content has exceeded the height of one screenWhen the content has exceeded the height of one screenWhen the content has exceeded the height of one screen<br />
When the content has exceeded the height of one screenWhen the content has exceeded the height of one screenWhen the content has exceeded the height of one screenWhen the content has exceeded the height of one screen<br />
When the content has exceeded the height of one screenWhen the content has exceeded the height of one screenWhen the content has exceeded the height of one screenWhen the content has exceeded the height of one screen<br />
When the content has exceeded the height of one screenWhen the content has exceeded the height of one screenWhen the content has exceeded the height of one screenWhen the content has exceeded the height of one screen<br />
When the content has exceeded the height of one screenWhen the content has exceeded the height of one screenWhen the content has exceeded the height of one screenWhen the content has exceeded the height of one screen<br />
When the content has exceeded the height of one screenWhen the content has exceeded the height of one screenWhen the content has exceeded the height of one screenWhen the content has exceeded the height of one screen<br />
</div>
<div class="lightBoxSubmit">
<input type="button" value="OK" onclick="hideLayer('lightBox2')" />
<input type="button" value="Cancel" onclick="hideLayer('lightBox2')" />
</div>
</div>
<span class="lightBoxMaxHeight"></span>
</div>
</div>
<div class="myPage">
Pretending to be rich in content<br />Pretending to be rich in content<br />Pretending to be rich in content<br />Pretending to be rich in content<br />
<div style="text-align:center;"><input type="button" value="Button on the first screen" onclick="showLayer('lightBox')" /></div>
Pretending to be rich in content<br />Pretending to be rich in content<br />Pretending to be rich in content<br />Pretending to be rich in content<br />
<select><option>A select used to test whether it can be covered in IE6</option></select><br />
Pretending to be rich in content<br />Pretending to be rich in content<br />Pretending to be rich in content<br />Pretending to be rich in content<br />
Pretending to be rich in content<br />Pretending to be rich in content<br />Pretending to be rich in content<br />Pretending to be rich in content<br />
Pretending to be rich in content<br />Pretending to be rich in content<br />Pretending to be rich in content<br />Pretending to be rich in content<br />
<select><option>Another select for testing whether it can be covered in IE6</option></select><br />
Pretending to be rich in content<br />Pretending to be rich in content<br />Pretending to be rich in content<br />Pretending to be rich in content<br />
<div style="text-align:center;"><input type="button" value="Button located in the second screen" onclick="showLayer('lightBox')" /><input type="button" value="When the content has exceeded the height of one screen" onclick="showLayer('lightBox2')" /></div>
Pretending to be rich in content<br />Pretending to be rich in content<br />Pretending to be rich in content<br />Pretending to be rich in content<br />
Pretending to be rich in content<br />Pretending to be rich in content<br />Pretending to be rich in content<br />Pretending to be rich in content<br />
Pretending to be rich in content<br />Pretending to be rich in content<br />Pretending to be rich in content<br />Pretending to be rich in content<br />
</div>
<script>
function showLayer(id) {
document.getElementById(id).style.display = "block";
}
function hideLayer(id) {
document.getElementById(id).style.display = "none";
}
</script>
</body>
</html>

This lightBox has the following characteristics, you can test it by modifying the code ^-^:

  1. Clicking anywhere on the page can perfectly shield the screen (any element including the scroll bar cannot be directly controlled at this time). In IE6, the select element can be shielded without hiding it (the flaw of the iframe shielding method: after shielding, if Drag the scroll bar and the select will still move to the top).
  2. The height of the lightBox adapts to its content and appears perfectly centered.
  3. When the content is a single line, it is displayed in the center; when the content is multiple lines, it is displayed on the left; when the height of the content is such that the lightBox exceeds the screen height, a scroll bar is displayed and displayed at the top, so that readers can read it completely.

If you are interested, the following tips that make up this lightBox are available for your reference:

1. Full screen masking method:

A. Hide the scroll bar of html/body.
B. Use a div as a mask, and then use another div to make a page with scroll bars, one on top and one on the bottom.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Chomo" />
<link rel="start" href=" http://www.14px.com " title="Home" />
<title>Method of full screen masking</title>
<style type="text/css">
* {
margin:0; padding:0; /*--- Simple css reset, it is said that it is not efficient, please replace it with an efficient one---*/
}
html,body {
height:100%; /*--- With this height, under IE6, it is effective to set height:100% for the sub-object of the body---*/
overflow:hidden; /*--- Kill the scroll bar generated by html or body---*/
}
.page {
line-height:3;
overflow:auto; /*--- The scroll bar depends on it---*/
width:600px; height:400px; background:#f60; /*--- Let’s make it this big for now so that everyone can see clearly---*/
position:relative; left:50px; top:50px; /*--- Move it a little so that everyone can see clearly, remove it, and the basic effect of the mask is achieved---*/
}
.cover {
position:absolute;
width:600px; height:400px; background:#000;
opacity:0.7; *filter:alpha(opacity=70);
z-index:2;
}
</style>
</head>
<body>
<div class="cover"></div>
<div class="page">
Pretending to be rich in content<br />Pretending to be rich in content<br />Pretending to be rich in content<br />Pretending to be rich in content<br />
Pretending to be rich in content<br />Pretending to be rich in content<br />Pretending to be rich in content<br />Pretending to be rich in content<br />
Pretending to be rich in content<br />Pretending to be rich in content<br />Pretending to be rich in content<br />Pretending to be rich in content<br />
Pretending to be rich in content<br />Pretending to be rich in content<br />Pretending to be rich in content<br />Pretending to be rich in content<br />
Pretending to be rich in content<br />Pretending to be rich in content<br />Pretending to be rich in content<br />Pretending to be rich in content<br />
Pretending to be rich in content<br />Pretending to be rich in content<br />Pretending to be rich in content<br />Pretending to be rich in content<br />
Pretending to be rich in content<br />Pretending to be rich in content<br />Pretending to be rich in content<br />Pretending to be rich in content<br />
Pretending to be rich in content<br />Pretending to be rich in content<br />Pretending to be rich in content<br />Pretending to be rich in content<br />
Pretending to be rich in content<br />Pretending to be rich in content<br />Pretending to be rich in content<br />Pretending to be rich in content<br />
</div>
</body>
</html>

Related Articles