<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<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 screen, automatic center 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>
<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" >
Center text when tip is less than one line [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>
<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 a screen when the content has exceeded the height of a screen when the content has exceeded the height of a screen when the content has exceeded the height of a screen [BR]
When the content has exceeded the height of a screen when the content has exceeded the height of a screen when the content has exceeded the height of a screen when the content has exceeded the height of a screen [BR]
When the content has exceeded the height of a screen when the content has exceeded the height of a screen when the content has exceeded the height of a screen when the content has exceeded the height of a screen [BR]
When the content has exceeded the height of a screen when the content has exceeded the height of a screen when the content has exceeded the height of a screen when the content has exceeded the height of a screen [BR]
When the content has exceeded the height of a screen when the content has exceeded the height of a screen when the content has exceeded the height of a screen when the content has exceeded the height of a screen [BR]
When the content has exceeded the height of a screen when the content has exceeded the height of a screen when the content has exceeded the height of a screen when the content has exceeded the height of a screen [BR]
When the content has exceeded the height of a screen when the content has exceeded the height of a screen when the content has exceeded the height of a screen when the content has exceeded the height of a screen [BR]
When the content has exceeded the height of a screen when the content has exceeded the height of a screen when the content has exceeded the height of a screen when the content has exceeded the height of a screen [BR]
When the content has exceeded the height of a screen when the content has exceeded the height of a screen when the content has exceeded the height of a screen when the content has exceeded the height of a screen [BR]
When the content has exceeded the height of a screen when the content has exceeded the height of a screen when the content has exceeded the height of a screen when the content has exceeded the height of a screen [BR]
When the content has exceeded the height of a screen when the content has exceeded the height of a screen when the content has exceeded the height of a screen when the content has exceeded the height of a screen [BR]
When the content has exceeded the height of a screen when the content has exceeded the height of a screen when the content has exceeded the height of a screen when the content has exceeded the height of a screen [BR]
When the content has exceeded the height of a screen when the content has exceeded the height of a screen when the content has exceeded the height of a screen when the content has exceeded the height of a screen [BR]
When the content has exceeded the height of a screen when the content has exceeded the height of a screen when the content has exceeded the height of a screen when the content has exceeded the height of a screen [BR]
When the content has exceeded the height of a screen when the content has exceeded the height of a screen when the content has exceeded the height of a screen when the content has exceeded the height of a screen [BR]
When the content has exceeded the height of a screen when the content has exceeded the height of a screen when the content has exceeded the height of a screen when the content has exceeded the height of a screen [BR]
When the content has exceeded the height of a screen when the content has exceeded the height of a screen when the content has exceeded the height of a screen when the content has exceeded the height of a screen [BR]
When the content has exceeded the height of a screen when the content has exceeded the height of a screen when the content has exceeded the height of a screen when the content has exceeded the height of a screen [BR]
When the content has exceeded the height of a screen when the content has exceeded the height of a screen when the content has exceeded the height of a screen when the content has exceeded the height of a screen [BR]
When the content has exceeded the height of a screen when the content has exceeded the height of a screen when the content has exceeded the height of a screen when the content has exceeded the height of a screen [BR]
When the content has exceeded the height of a screen when the content has exceeded the height of a screen when the content has exceeded the height of a screen when the content has exceeded the height of a screen [BR]
When the content has exceeded the height of a screen when the content has exceeded the height of a screen when the content has exceeded the height of a screen when the content has exceeded the height of a screen [BR]
When the content has exceeded the height of a screen when the content has exceeded the height of a screen when the content has exceeded the height of a screen when the content has exceeded the height of a 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>
<div class= "MyPage" >
Pretending to be rich content [BR] pretending to be rich content [BR] pretending to be rich content [BR]
<div style= "Text-align:center;" ><input type= "button" value= "onclick=" Showlayer (' LightBox ') located on the first screen/></div>
Pretending to be rich content [BR] pretending to be rich content [BR] pretending to be rich content [BR]
<select><option> a SELECT</OPTION></SELECT>[BR for testing whether the IE6 can be covered in the test room]
Pretending to be rich content [BR] pretending to be rich content [BR] pretending to be rich content [BR]
Pretending to be rich content [BR] pretending to be rich content [BR] pretending to be rich content [BR]
Pretending to be rich content [BR] pretending to be rich content [BR] pretending to be rich content [BR]
<select><option> Another SELECT</OPTION></SELECT>[BR for testing whether the IE6 can be covered in the test room]
Pretending to be rich content [BR] pretending to be rich content [BR] pretending to be rich content [BR]
<div style= "Text-align:center;" ><input type= "button" value= "buttons" onclick= showlayer (' LightBox ') '/><input ' in the second screen button ' type= ' When the content has exceeded the height of a screen "onclick=" Showlayer (' LightBox2 ')/></div>
Pretending to be rich content [BR] pretending to be rich content [BR] pretending to be rich content [BR]
Pretending to be rich content [BR] pretending to be rich content [BR] pretending to be rich content [BR]
Pretending to be rich content [BR] pretending to be rich content [BR] pretending to be rich content [BR]
</div>
<script>
function Showlayer (ID) {
document.getElementById (id). style.display = "block";
}
function Hidelayer (ID) {
document.getElementById (id). style.display = "None";
}
</script>
</body>
This lightbox has the following characteristics, you can modify the code to measure ^-^:
At any point in the page, can be a perfect screen (at this time can not directly control any element including the scroll bar), IE6 can be hidden without hiding the Select element (the defect of the IFrame masking method: After shadowing, if you drag the scroll bar, select will still move to the top level).
The Lightbox is highly adaptive to its content and renders itself in a perfectly centered state.
When the content is a single line, the center display, the content is multiple rows, the left display, the content height makes the Lightbox more than the screen when the scroll bar, and the top display, the reader can read the full.
If you are interested, the following tips that make up this lightbox are available for your perusal:
1. Full Screen Masking method:
A. Hide the Html/body scroll bar.
B. Use a div to make a mask, then use a div to do with a scroll bar page, a stack above, a stack below.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<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 Masking Method </title>
<style type= "Text/css" >
* {
margin:0; padding:0; /*---Simple css reset, it is said to be inefficient, please replace it with efficient---* *
}
Html,body {
height:100%; /*---With this height, IE6, the body's child object settings height:100% Effective---* *
Overflow:hidden; /*---to destroy the HTML or body-generated scroll bar---* *
}
. page {
Line-height:3;
Overflow:auto; /*---The scroll bar depends on it---* *
width:600px; height:400px; Background: #f60; * *---for the time being so large to facilitate everyone to see clearly---* *
position:relative; left:50px; top:50px; /*---Move a little, convenient for everyone to see clearly, remove it, 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>
<body>
<div class= "Cover" ></div>
<div class= "Page" >
Pretending to be rich content [BR] pretending to be rich content [BR] pretending to be rich content [BR]
Pretending to be rich content [BR] pretending to be rich content [BR] pretending to be rich content [BR]
Pretending to be rich content [BR] pretending to be rich content [BR] pretending to be rich content [BR]
Pretending to be rich content [BR] pretending to be rich content [BR] pretending to be rich content [BR]
Pretending to be rich content [BR] pretending to be rich content [BR] pretending to be rich content [BR]
Pretending to be rich content [BR] pretending to be rich content [BR] pretending to be rich content [BR]
Pretending to be rich content [BR] pretending to be rich content [BR] pretending to be rich content [BR]
Pretending to be rich content [BR] pretending to be rich content [BR] pretending to be rich content [BR]
Pretending to be rich content [BR] pretending to be rich content [BR] pretending to be rich content [BR]
</div>
</body>
