Click on a button, pop-up a custom window, and can be arbitrarily dragged, jquery can also achieve this function, here is a good example, you can feel the
We often see on the Web page, when clicked a button, pop-up a custom window, and can drag and drop arbitrarily, thus change its position use jquery to implement drag and drop, you must have jquery file, implementation steps: 1, Introduce jquery file 2, write JS script Specific code: HTML code: code as follows: <button id= "Show" > Display </button> <div class= "Win" > <div class= "WTop" ><p style= "float:right;margin:5px 5px 0px 0px;color:white "id=" hidden ">X</p></div> <div class=" content "></div> </div> CSS style: code is as follows: <style type= "Text/css" > win{width:500px;height:600px; Background: #000000 border-radius:8px;box-shadow:0px 0px 5px 10px;opacity:0.8;position:absolute;left:0;top:0; display:none} . Win .wtop{height:30px;width:100%;cursor:move} . Win content{height:570px;width:100%; border-radius:5px;background:white} </style> JS script: code as follows: <script language= " JavaScript "type=" Text/javascript > $ (function () { //Drag Draganddrop (); //Initialization position Initposition (); //click button CLICKSHOWBTN (); }); //drag function Draganddrop () { var _move=false;//move tag var _x,_y;//the relative position of the mouse away from the upper-left corner of the control $ (". WTop"). MouseDown (function (e) { _move= true; _x=e.pagex-parseint ($ (". Win"). CSS ("left")); _y=e.pagey-parseint ($ (". Win"). CSS ("top"); // $ (". WTop"). Fadeto (20,0.5)//Click Start drag and transparently display }); $ (document). MouseMove (function (e) { if (_move) { The position of the mouse when the Var x=e.pagex-_x;//is moved the absolute position of the upper-left corner of the control VAR y=e.pagey-_y; $ (". Win"). css ({top:y,left:x});//control new position } }). MouseUp (function () { _move=false; //$ (". WTop"). Fadeto ("Fast", 1);//Stop moving after releasing the mouse and revert to opaque }); } //Initialize drag div position function initposition () { //Compute initialization location var itop= ($ (document). Height ()-$ (". Win "). Height ())/2; var ileft= ($ (document). Width ()-$ (". Win "). Width ())/1.8; //Set the position of the dragged Div $ (". Win " ). css ({top:itop,left:ileft}); } //Click on display button function clickshowbtn () { $ ("#show"). Click (function () { $ (". Win"). Show (1000); }); $ ("#hidden"). Click (function () { $ (". Win"). Hide (1000); }); } </script> The introduction of JS file code is as follows: <script Type= "Text/javascript" src= "Js/jquery-1.10.2.min.js" ></script>