Click the button on the mask layer and it will show the drag and close effects (two methods) _ jquery-js tutorial

Click the button to bring up the mask layer. You can drag and close the layer as needed. Next, we will use this article to introduce you to the effect of dragging and disabling the button on the mask layer. For more information, see the following:

The JavaScript-based webpage pop-up layer is positioned at the title bar of the pop-up layer. You can drag the floating layer to move its position at will and close it if you don't need it. The operation experience is comfortable and the compatibility is good, IE, Firefox, and many other browsers run stably and respond quickly. In terms of code performance, it is concise and practical, and it is quite good to take it for study.

Js Code

Example 1:

Pop-up layer and drag and dropScript window. onload = function () {var oWin = document. getElementById ("win"); var oLay = document. getElementById ("overlay"); var oBtn = document. getElementsByTagName ("button") [0]; var oClose = document. getElementById ("close"); var oH2 = oWin. getElementsByTagName ("h2") [0]; var bDrag = false; var disX = disY = 0; oBtn. onclick = function () {oLay. style. display = "block"; oWin. style. display = "block"}; oClose. o Nclick = function () {oLay. style. display = "none"; oWin. style. display = "none"}; oClose. onmousedown = function (event) {(event | window. event ). cancelBubble = true ;}; oH2.onmousedown = function (event) {var event = event | window. event; bDrag = true; disX = event. clientX-oWin. offsetLeft; disY = event. clientY-oWin. offsetTop; this. setCapture & this. setCapture (); return false}; document. onmousemove = funct Ion (event) {if (! BDrag) return; var event = event | window. event; var iL = event. clientX-disX; var iT = event. clientY-disY; var maxL = document.doc umentElement. clientWidth-oWin. offsetWidth; var maxT = document.doc umentElement. clientHeight-oWin. offsetHeight; iL = iL <0? 0: iL; iL = iL> maxL? MaxL: iL; iT = iT <0? 0: iT; iT = iT> maxT? MaxT: iT; oWin. style. marginTop = oWin. style. marginLeft = 0; oWin. style. left = iL + "px"; oWin. style. top = iT + "px"; return false}; document. onmouseup = window. onblur = oH2.onlosecapture = function () {bDrag = false; oH2.releaseCapture & oH2.releaseCapture () ;}; script
 
×
Http://www.100sucai.com </a>
CSS3 and Html5
Charts and graphs

 
  Pop-up layer
 

Jq code:

　Sample Code 2:

JQuery pop-up Layer Effect