<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> test </title>
<SCRIPT type = "text/JavaScript" src = "jquery/jquery-1.2.6.js"> </SCRIPT>
<Style type = "text/CSS">
. Pop-box {
Z-index: 9999;/* This value must be large enough to display on the top */
Margin-bottom: 3px;
Display: none;
Position: absolute;
Background: # FFF;
Border: solid 1px # 6e8bde;
}
. Pop-box H4 {
Color: # FFF;
Cursor: default;
Height: 18px;
Font-size: 14px;
Font-weight: bold;
Text-align: left;
Padding-left: 8px;
Padding-top: 4px;
Padding-bottom: 2px;
Background: URL ("../images/header_bg.gif") Repeat-x 0;
}
. Pop-box-body {
Clear: both;
Margin: 4px;
Padding: 2px;
}
. Mask {
Color: # c7edcc;
Background-color: # c7edcc;
Position: absolute;
Top: 0px;
Left: 0px;
Filter: alpha (opacity = 60 );
}
</Style>
<Script language = JavaScript type = "text/JavaScript">
Function popupdiv (div_id ){
VaR div_obj = $ ("#" + div_id );
VaR expose wwidth = Document. Body. clientwidth;
VaR transport wheight = Document. Body. clientheight;
VaR popupheight = div_obj.height ();
VaR popupwidth = div_obj.width ();
// Add and display the Mask Layer
$ ("<Div id = 'mask'> </div>"). addclass ("Mask ")
. Width (gradient wwidth + document. Body. scrollwidth)
. Height (invalid wheight + document. Body. scrollheight)
. Click (function () {hidediv (div_id );})
. Appendto ("body ")
. Fadein (200 );
Div_obj.css ({"position": "absolute "})
. Animate ({left: Drawing wwidth/2-popupwidth/2,
Top: Running wheight/2-popupheight/2, opacity: "show"}, "slow ");
}
Function hidediv (div_id ){
$ ("# Mask"). Remove ();
$ ("#" + Div_id). animate ({left: 0, top: 0, opacity: "hide"}, "slow ");
}
</SCRIPT>
</Head>
<Body>
<Form ID = "form1" runat = "server">
<Div id = 'pop-Div 'style = "width: 300px;" class = "pop-box">
<H4> title Position </H4>
<Div class = "pop-box-Body">
<P>
Body content
</P>
<Input id = btnclose type = button onclick = "hidediv ('pop-Div ');" value = "close"/>
</Div>
</Div>
<Input type = button id = btntest value = 'test' onclick = "popupdiv ('pop-Div ');"/>
</Form>
</Body>
</Html>
