<! 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"/>
<Title> pop-up layer </title>
<Style>
<! --
Body, Div, H2 {margin: 0; padding: 0 ;}
HTML, body {overflow: hidden; Height: 100%; font-size: 12px; font-family: Arial, Helvetica, sans-serif; color: #333 ;}
# Mask {Background: #000; position: absolute; top: 0; left: 0; width: 100%; Height: 100%; opacity: 0.5; filter: alpha (opacity = 50); display: none ;}
# Showbox {width: 400px; Height: 200px; position: absolute; top: 50%; left: 50%; margin:-100px 0 0 0-200px; Z-index: 1; Background: # FFF; border-radius: 5px; box-Shadow: 0 1px 3px 2px #666; display: none ;}
# Title {margin: 5px; position: relative; Height: 27px; border-bottom: 1px solid #333; line-Height: 28px; cursor: move ;}
# Play {position: absolute; Right: 5px; top: 5px; width: 50px ;}
# Play A. Close {float: Right; width: 16px; Height: 16px; Background: URL (img/close.png) 0 0 no-Repeat ;}
# Message {margin: 5px; Height: 155px; overflow: hidden; line-Height: 19px ;}
-->
</Style>
<SCRIPT>
<! --
Window. onload = function ()
{
VaR input = Document. getelementsbytagname ("input") [0];
VaR mask = Document. getelementbyid ("Mask ");
VaR box = Document. getelementbyid ("Showbox ");
VaR play = Document. getelementbyid ("play ");
VaR Title = Document. getelementbyid ("title ");
VaR closing = play. getelementsbytagname ("A") [0];
Input. onclick = function () {mask. style. Display = "Block"; box. style. Display = "Block "}
Closing. onclick = function () {mask. style. Display = "NONE"; box. style. Display = "NONE "}
VaR isclick = false, printx = printy = 0;
Title. onmousedown = function (Event)
{
VaR prints = event | window. event;
Isclick = true;
Printx = prints. clientX-box.offsetLeft, printy = prints. clientY-box.offsetTop;
// Capture events outside the region
This. setcapture & this. setcapture ();
}
Title. onmousemove = function (Event)
{
// We need to drag it to change its top and left values, but it cannot exceed the browser interface.
If (isclick)
{
VaR mouse = event | window. event;
VaR Boxx = mouse. clientx-printx;
VaR boxy = mouse. clienty-printy;
VaR form = Document. Body | document.doc umentelement;
VaR Maxx = form. clientWidth-box.offsetWidth;
VaR Maxy = form. clientHeight-box.offsetHeight;
// Determine if the browser is exceeded
Boxx = Boxx <0? 0: Boxx;
Boxx = Boxx> Maxx? Maxx: Boxx;
Boxy = boxy <0? 0: boxy;
Boxy = boxy> Maxy? Maxy: boxy;
Box. style. Margin = 0;
Box. style. Left = Boxx + "PX ";
Box. style. Top = boxy + "PX ";
}
Else {return ;}
}
Document. onmouseup = Window. onblur = title. onlosecapture = function ()
{
Isclick = false;
// Capture events outside the region
Title. releasecapture & title. releasecapture ();
}
}
-->
</SCRIPT>
</Head>
<Body>
<Div id = "Mask"> </div>
<Div id = Showbox>
<Div id = "title">
<H2 Title = "pop-up layer"> pop-up layer </H2>
<! -- Zoom in or out of reserved space -->
<Div id = "play"> <a class = "close" href = "javascript:;" Title = "close"> </a> </div> </span>
</Div>
<Div id = "message">
This is a pop-up layer <br/>
If you need to confirm the button, you can add it as needed (the effect has the close function and then add Ajax) <br/>
Pop-up custom information style customization <br/>
</Div>
</Div>
<Input type = "button" value = "It's Show button"/>
</Body>
</Html>
This is a drag-and-drop pop-up layer, that is, the drag function is added on the basis of (1); the browser compatibility is not tested; any bugs can be reported. Thank you!
There is also no compatibility with IE, and there are no rounded corners and shadows under ie;
The main objective is to learn how to use setcapture () releasecapture (), which makes it perfect to drag the pop-up layer;
Put the demo on:
Http://files.cnblogs.com/wyflogo/MessageBox.zip
The compatibility issue in WebKit has been fixed! Update the demo address:
Http://cowll.com/demo/MessageBox.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
