Detachment of style and behavior when implementing lightBox reduces JS

Author：Eve Cole Update Time：2025-05-23 13:00:04

[Browsers participating in the test: ie6/ie7/ie8/ff3.5/op9.6/sf4/chrome2]

[Operating system: windows]

This tutorial aims to separate style and behavior in lightbox, and reduce the work of JS in all aspects (full screen occlusion, ie6 occlusion select, bidirectional centering, highly adaptive content, etc.).

First upload the code :

Run the code box

<!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 blocking, auto-centered 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,.popuppiframe,.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=popupcomponent id=lightbox><iframe class=popupcover></div><div class=lightbox><span class=lightboxmaxheight></span><div class=lightboxcontent><div class=lightboxwrapper>When the prompt is less than one line, the text is centered<br /></div><div class=lightboxsubmit><input type=button value=determine onclick=hidelayer('lightbox') /><input type=button value=cancel onclick=hidelayer('lightbox') /></div></div></div><div class=popupcomponent id=lightbox2><iframe class=popupframe></iframe><div class=popupcover></div><div class=lightbox><div class=lightboxcontent><div class=lightboxwrapper>When the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen. />When the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen. <br />When the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen. <br />When the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen. <br />When the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen. <br />When the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen. <br />When the content has exceeded the height of one screen when the content has exceeded the height of one screen. <br />When the content has exceeded the height of one screen when the content has exceeded the height of one screen. <br />When the content has exceeded the height of one screen when the content has exceeded the height of one screen. <br />When the content has exceeded the height of one screen when the content has exceeded the height of one screen. <br />When the content has exceeded the height of one screen when the content has exceeded the height of one screen. <br />When the content has exceeded the height of one screen when the content has exceeded the height of one screen. <br /> />When the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen. <br />When the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen. <br />When the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen. <br />When the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen. <br />When the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen. <br />When the content has exceeded the height of one screen when the content has exceeded the height of one screen. <br />When the content has exceeded the height of one screen when the content has exceeded the height of one screen. <br />When the content has exceeded the height of one screen when the content has exceeded the height of one screen. <br />When the content has exceeded the height of one screen when the content has exceeded the height of one screen. <br />When the content has exceeded the height of one screen when the content has exceeded the height of one screen. <br />When the content has exceeded the height of one screen when the content has exceeded the height of one screen. <br /> />When the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen. <br />When the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen. <br />When the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen. <br /></div><div class=lightboxsubmit><input type=button value=determine onclick=hidelayer('lightbox2') /><input type=button value=cancel onclick=hidelayer('lightbox2') /></div></div><span class=lightboxmaxheight></span></div><div class=mypage>Pretending rich content<br />Pretending rich content<br />Pretending rich content<br />Pretending rich content<br />Pretending rich content<br /><div style=text-align:center;><input type=button value=button button onclick=showlayer('lightbox') /></div>Pretending rich content<br />Pretending rich content<br />Pretending rich content<br />Pretending rich content<br />Pretending rich content<br />Pretending rich content<br />Pretending rich content<br />Pretending rich content<br />Pretending rich content<br />Pretending rich content<br />Pretending rich content<br />Pretending rich content<br /><div style=text-align:center;><input type=button value=button value=button button onclick=showlayer('lightbox') /></div>Pretending rich content<br />Pretending rich content<br />Pretending rich content<br />Pretending rich content<br />Pretending rich content<br />Pretending rich content<br />Pretending rich content<br />Pretending rich content<br />Pretending rich content<br />Pretending rich content<br /> /><select><option>A select for testing whether ie6 can cover it</option></select><br />Pretended to be rich in content<br />Pretended to be rich in content<br />Pretended to be rich in content<br />Pretended to be rich in content<br />Pretended to be rich in content<br />Pretended to be rich in content<br />Pretended to be rich in content<br />Pretended to be rich in content<br />Pretended to be rich in content<br />Pretended to be rich in content<br />Pretended to be rich in content<br />Pretended to be rich in content<br />Pretended to be rich in content<br /><select><option>Another select for testing whether ie6 can cover it</option></select><br />Pretended to be rich in content<br />Pretended to be rich in content<br /><div style=text-align:center;><input type=button value=button onclick=showlayer('lightbox') /><input type=button value=When the content has exceeded the height of one screen onclick=showlayer('lightbox2') /></div>Pretend to be rich in content<br />Pretend to be rich in content<br />Pretend to be rich in content<br />Pretend to be rich in content<br />Pretend to be rich in content<br />Pretend to be rich in content<br />Pretend to be rich in content<br />Pretend to be rich in content<br />Pretend to be rich in content<br />Pretend to be rich in content<br />Pretend to be rich in content<br />Pretend to be rich in content<br />Pretend to be rich in content<br />Pretend to be rich in content<br />Pretend to be rich in content<br />Pretend to be rich in content<br />Pretend to be rich in content<br />Pretend to be rich in content<br />Pretend to be rich in content<br />Pretend to be rich in content<br />Pretend to be rich in content<br />Pretend to be rich in content<br />Pretend to be rich in content<br />Pretend to be rich in content<br />Pretend to be rich in content<br />Pretend to be rich in content<br />Pretend to be rich in content<br />Pretend to be rich in content<br />Pretend to be rich in content<br />Pretend to be rich in content<br />Pretend to be rich in content<br />Pretend to be rich in content<br />Pretend to be rich in content<br />Pretend to be rich in content<br />Pretend to be rich in content<br />Pretend to be rich in content<br />Pretend to be rich /></div><script>function showlayer(id) {document.getelementbyid(id).style.display = block;}function hidelayer(id) {document.getelementbyid(id).style.display = none;}</script></body></html>

[ctrl+a All selection tips: You can modify some code first, and then press Run]

This lightbox has the following features, you can test it by modifying the code ^-^:

Clicking on any position in the page can perfectly cover the screen (at this time, any element including the scroll bar cannot be directly controlled). The select element can be blocked without hiding in ie6 (the defect of the iframe occlusion method: after blocking, if the scroll bar is dragged, the select will still move to the top level).
The lightbox is highly adaptable to its content and presents a perfect centering state.
When the content is a single line, it is displayed in the center; when the content is a multi-line, it is displayed in the left; when the content height makes the lightbox exceed the screen height, it appears scroll bars and is displayed in the top, so readers can read in the complete picture.

If you are interested, the following tips for forming this lightbox are available for you to refer to:

1. Methods for full screen shading:

a. Hide the scrollbar of html/body.

b. Use a div as a mask, and then use a div as a page with scroll bars, one stacked on top and one stacked on bottom.

Run the code box

[ctrl+a All selection tips: You can modify some code first, and then press Run]