I found it on the Internet in the morning. Most of them have implemented basic functions, but it is not what I need. in lightbox2, no matter how long the page is, the pop-up messages are displayed in the center of the current screen. to use lightbox. however, there are too many JS references. it's boring to think about it. I corrected it on the Internet. I have not sorted it out.
Fixed some problems in doctype verification in the document. At the same time, I tested it in IE7, ff3, and chrome, and the results were the same.
Doctype is optional
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML>
<Head>
<SCRIPT>
VaR docele = function (){
Return document. getelementbyid (arguments [0]) | false;
}
Function opennewdiv (){
VaR overlayid = "overlay ";
VaR msgid = "overlaymsg ";
If (docele (overlayid) document. removechild (docele (overlayid ));
If (docele (msgid) document. removechild (docele (msgid ));
// Message Display
VaR newdiv = Document. createelement ("Div ");
Newdiv. ID = msgid;
Newdiv. style. Position = "absolute ";
Newdiv. style. zindex = "999 ";
Newdiv. style. width = "200px ";
Newdiv. style. Height = "300px ";
VaR scrolltop = Window. pageyoffset | document.doc umentelement. scrolltop | document. Body. scrolltop | 0;
VaR _ clientheight = 0;
// Ie FF varies with doctype.
_ Clientheight = math. Min (document. Body. clientheight, document.doc umentelement. clientheight );
If (_ clientheight = 0)
_ Clientheight = math. Max (document. Body. clientheight, document.doc umentelement. clientheight );
VaR _ clientwidth = document.doc umentelement. clientwidth | document. Body. clientwidth;
// The height of the entire page
VaR _ pageheight = math.max(document.body.scrollheight,document.doc umentelement. scrollheight );
VaR msgtop = (scrolltop + (_ clientheight-300)/2) + "PX ";
VaR msgleft = (_ clientwidth-200)/2 + "PX ";
Newdiv. style. Top = msgtop;
Newdiv. style. Left = msgleft; // center the screen
Newdiv. style. Background = "# efefef ";
Newdiv. style. Border = "1px solid #860001 ";
Newdiv. style. Padding = "5px ";
Newdiv. innerhtml = "new activation layer content ";
Document. Body. appendchild (newdiv );
// Lock Screen Layer
VaR newmask = Document. createelement ("Div ");
Newmask. ID = overlayid;
Newmask. style. Position = "absolute ";
Newmask. style. zindex = "998 ";
Newmask. style. width = _ clientwidth + "PX ";
Newmask. style. Height = _ pageheight + "PX ";
Newmask. style. Top = "0px ";
Newmask. style. Left = "0px ";
Newmask. style. Background = "#777 ";
Newmask. style. Filter = "progid: DXImageTransform. Microsoft. Alpha (style = 3, opacity = 25, finishopacity = 75 ";
// Newmask. style. Filter = "alpha (opacity = 40 )";
Newmask. style. Opacity = "0.40 ";
Document. Body. appendchild (newmask );
// Disable lock screen
VaR newa = Document. createelement ("");
Newa. href = "#";
Newa. innerhtml = "Disable the activation layer ";
Newa. onclick = function (){
Document. Body. removechild (docele (overlayid ));
Document. Body. removechild (docele (msgid ));
Return false;
}
Newdiv. appendchild (newa );
}
</SCRIPT>
</Head>
<Body>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<A href = "#" onclick = "opennewdiv (); Return false;"> activate a new layer </a>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<Input type = "button" onclick = "AAA ()" value = "AAA"/>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<A href = "#" onclick = "opennewdiv (); Return false;"> activate a new layer </a>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<A href = "#" onclick = "opennewdiv (); Return false;"> activate a new layer </a>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<Input type = "button" onclick = "AAA ()" value = "AAA"/>
<P> webpage content </P>
<A href = "#" onclick = "opennewdiv (); Return false;"> activate a new layer </a>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<A href = "#" onclick = "opennewdiv (); Return false;"> activate a new layer </a>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<Input type = "button" onclick = "AAA ()" value = "AAA"/>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<P> webpage content </P>
<Input type = "button" onclick = "AAA ()" value = "AAA"/>
</Body>
</Html>
Sort out the code later. Now let's take a look at the effect.