Figure 1 (a div pops up)
Figure 2 (Eject multiple)
constructor function:
Copy Code code as follows:
var divwindow= function (popup/* the outermost div id*/,popup_drag/* drag div id*/,popup_exit/* exit button id*/, exitbutton/* triggers server-side exit button id*/, Varwidth,varheight,zindex) {
This.popup =popup;
This.height =varheight; Window height, not used to set window height width, used to position the screen
This.width =varwidth; Window width
This.popup_exit=popup_exit;
This.exitbutton=exitbutton;
This.zindex=zindex;
This.init = function () {//Init window
This.popupshow ();
This.startdrag (); Set drag
This.setcommond (); Setting off
DivWindow.ArrayW.push (document.getElementById (this.popup)); Store window to array
};this.init ();
};
Call:
Copy Code code as follows:
<input type= "button" id= "Show" onclick= javascript:new Divwindow (' Popup ', ' Popup_drag ', ' popup_exit ', ' Exitbutton ') , ' m ', ' 4 ', "value= ' triggers pop-up detail div '/>
Some places may feel a little strange, don't ask me what, because I have this need, have time to modify the mask effect. More detailed code See download
Complete code
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <title> window class </title> <meta Http-eq uiv= "Content-type" content= "text/html;charset=gb2312"/> <style type= "text/css" > Mask{position:absolute; top:0px; left:0px; Filter:alpha (OPACITY=50); -moz-opacity:0.5; opacity:0.5; Background-color: #ffffff; Z-index:2; Display:none;} /* Eject basic information div/div.sample_popup {height:auto; border:1px solid #327eca; width:300px; div.menu_form_header{Background:url ('.. /images/baseinfo/titlebg.gif ') repeat-x; } div.sample_popup div.menu_form_header {border-bottom:0px; Cursor:default; width:100%; height:22px; line-height:22px; Vertical-align:middle; Text-decoration:none; Font-family: "Times New Roman", Serif; font-weight:800; font-size:13px; Color: #206040; } div.menu_form_body {width:100%; Height:150px; font-size:12px; Background-color: #f1f8fe; } div.sample_popup input.menu_form_exit {float:right; margin:4px 5px 0px 0px; Cursor:pointer; /*end: Pop-up product info div/</style> <script type= "Text/javascript" >/***************************************** * Divwindow.js **************************************************/var divwindow= function (popup/* outermost div ID */,popup_drag/* Drag div id*/,popup_exit/* exit button id*/, exitbutton/* trigger server-side Exit button Id*/,varwidth,varheight,zindex) {This.popup =popup; Window name This.height =varheight; Window height, and is not used to set the window height width, used to locate the screen position this.width =varwidth; Window width this.popup_exit=popup_exit; This.exitbutton=exitbutton; This.zindex=zindex; This.init = function () {//Init window this.popupshow (); This.startdrag (); Set drag This.setcommond (); Set off DivWindow.ArrayW.push (document.getElementById (this.popup)); Storage window to array};this.init ();}; Storage window to array divwindow.arrayw = new Array (); String Connection Class Divwindow.stringbuild = function () {This.arr = new Array (); This.push = function (str) {this.arr.push (str); }; this.tostring = function () {return This.arr.join (""); }; }; Drag class Divwindow.drag = function (o, oroot) {var _self = this; Drag Object this.obj = (typeof oroot!= "undefined")? Oroot:o; This.relleft = 0; Record horizontal Axis this.reltop = 0; Record Ordinate o.onselectstart = function () {return false; }; O.onmousedown = function (e) {//mouse down E = _self.fixe (e); _self.relleft = E.clientx-_self.fixu (_self.obj.style.left); _self.reltop = E.clienty-_self.fixu (_self.obj.style.top); Document.onmousemove = function (e) {_self.drag (e); _self.obj.style.border = "1px dashed #000000"; _self.obj.style.filter = "Alpha (opacity=30)"; _self.obj.style.opacity = "0.3"; }; Document.onmouseup = function () {_self.end (); _self.obj.style.border = "1px solid #cccccc"; _self.obj.style.borderbottom = "2px solid #E0E0E0"; _self.obj.style.borderright = "2px solid #E0E0E0"; _self.obj.style.filter = "Alpha (opacity=100)"; _self.obj.style.opacity = "1"; }; }; This.drag = function (e) {//drag E = This.fixe (e); var L = e.clientx-this.relleft; var t = e.clienty-this.reltop; if (T < 0) {t = 0; Prevent head disappearing} this.obj.style.left = L + "px"; This.obj.style.top = t + "px"; }; This.end = function () {//end drag document.onmousemove = null; Document.onmouseup = null; }; This.fixe = function (e) {//fix event if (typeof e = "undefined") e = window.event; return e; }; This.fixu = function (u) {//processing PX Unit return parseint (U.split ("P") [0]); }; }; Window Drag DivWindow.prototype.startDrag = function () {var obj = document.getElementById (this.popup); New Divwindow.drag (obj.childnodes[0], obj); }; Set window Priority DivWindow.prototype.setTop = function () {document.getElementById (this.popup). onclick = Document.getel Ementbyid (this.popup). onmousedown = function () {for (Var i=0;i<divwindow.arrayw.length;i++) { Divwindow.arrayw[i].style.zindex = 1; } this.style.zIndex = 100; }; }; Display Divwindow.prototype.popupshow=function () {document.all.mask.style.display= "block"; Document.all.mask.style.width=window.screen.width +20; Document.all.mask.style.height=window.screen.width +20; var element = document.getElementById (This.popup); Element.style.position = "absolute"; element.style.visibility = "visible"; Element.style.display = "block"; Element.style.width=this.width; element.style.height=' Auto '; Element.style.left = (window.screen.width-this.width)/2+ "px"; Element.style.top = (window.screen.height-this.height-100)/2+ "px"; Element.style.top =20+ "px"; Element.style.zindex=this.zindex; }//set off DivWindow.prototype.setCommond = function () {var _self = this; Root object var obj = document.getElementById (this.popup); var exit = document.getElementById (This.popup_exit); var Triggserverevent=document.getelementbyid (This.exitbutton); Set Shutdown Exit.onclick = function () {Obj.style.display = ' none '; obj.style.visibility = ' hidden '; Document.all.mask.style.display= ' None '//Off Mask layer Triggserverevent.click ();//Trigger Server-side exit event}; }; </script> </pead> <body> <div>sffs <input type= "button" id= "Show" onclick= "Javascript:new D Ivwindow (' Popup ', ' Popup_drag ', ' popup_exit ', ' Exitbutton ', ', ', ' 4 '); "value=" triggers pop-up detail div '/> <input Type= "button" id= "Exitbutton" value= "aaaa"/> </div><!--mask layer--> <div id= "Mask" class= "Mask" > </div> <!--pop-up basic details div layer--> <div "class= Opup "Id=" Popup > <div class= "menu_form_header" id= "Popup_drag" > <input type= "button" id= "Popup_exit" Valu E= "Exit"/> Area data </div> <div class= "Menu_form_body" > <div id= "popdetail" > Zone name: <input type= "b Utton "id=" Button1 "onclick=" javascript:new divwindow (' Div1 ', ' Div2 ', ' exit2 ', ' Exitbutton ', ', ', ', ', ' 5 '); "Value=" Trigger pop-up details DIV2 '/> </div> </div> </div> <!--pop-up basic details div layer--> <div class= "sample_p Opup "id=" Div1 "> <div class=" menu_form_header "id=" Div2 "> <input type=" button "id=" Exit2 "value=" Exit "/> Area data 2222 </div> <div class= "Menu_form_body" > <div id= "Div3" > Zone name: YJ </div> </div> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Package download
