JS Pop-up window

var html = "<div style= ' color:red ' > This is the test popup </div>";
var button = "<input type= ' button ' value= ' OK '/><input type= ' button ' value= ' Cancel '/> ';
var win = new Window ({
   width:500,//width
   height:400,//height
   Title: ' Test popup ',//title
   content:html,//content
   Ismask:false,//whether or not to mask
   Buttons:button,//button
   Isdrag:true,//whether to move
});


Js:

Identification of each pop-up window
var x = 0;
var idzt = new Array ();
var Window = function (config) {
   
ID is not duplicated
IDZT[X] = "Zhuti" +X; Pop-up window ID
   
Initialize, receive parameters | | The previous indicates a default value, followed by NULL as the default value
This.config = {
Width:config.width | | 300,//width
Height:config.height | | 200,//height
buttons:config.buttons | | ",//Default No button
Title:config.title | | ' title ',//title
content:config.content | | ' content ',//content
IsMask:config.isMask = = False?false:config.ismask | | True,//whether the mask is masked
IsDrag:config.isDrag = = False?false:config.isdrag | | True,//whether to move
};
   
Loading pop-up windows
var w = ($ (window). Width ()-this.config.width)/2;
var h = ($ (window). Height ()-this.config.height)/2;
   
var nr = "<div class= ' Zhuti ' id= '" +idzt[x]+ "' bs= '" +x+ "' style= ' width:" +this.config.width+ "PX;  Height: "+this.config.height+" PX; Left: "+w+" PX; Top: "+0+" PX; ' ></div> ';
$ ("Body"). Append (NR);
   
Load pop-up window title
var content = "<div id= ' title" +x+ "' class= ' title ' bs= '" +x+ "' >" +this.config.title+ "<div id= ' Close" +x+ "' class= ' Close ' bs= ' "+x+" >x</div></div> ";
Loading pop-up window content
var nrh = this.config.height-85;
Content = content+ "<div id= ' content" +x+ "' bs= '" +x+ "' class= ' content ' style= ' width:100%; Height: "+nrh+" PX; ' > "+this.config.content+" </div> ";
Load button
Content = content+ "<div id= ' btnx" +x+ "' bs= '" +x+ "' class= ' btnx ' >" +this.config.buttons+ "</div>";
   
Add titles, content, and buttons to the window
$ (' # ' +idzt[x]). HTML (content);
   
Creating a matte Layer
if (This.config.isMask)
{
var zz = "<div id= ' zz ' ></div>";
$ ("Body"). Append (ZZ);
$ ("#zz"). CSS (' Display ', ' block ');
}
   
Maximum minimum limit to avoid moving to the outside of the page
var MaxX = $ (window). width ()-this.config.width;
var Maxy = $ (window). Height ()-this.config.height;
var MinX = 0,
Miny = 0;
   
Window movement
if (This.config.isDrag)
{
Mouse move pop-up window
$ (". Title"). Bind ("MouseDown", function (e) {
            
var n = this.getattribute ("BS"); Take identification
            
Make the selection to the top
$ (". Zhuti"). CSS ("Z-index", 3);
$ (' # ' +idzt[n]). CSS ("Z-index", 4);
            
Take the initial coordinates
var endx = 0,//moved after x-coordinate
EndY = 0,//moved after y-coordinate
StartX = parseint ($ (' # ' +idzt[n]). CSS ("left")),//pop-up layer's initial x-coordinate
Starty = parseint ($ (' # ' +idzt[n]). CSS ("top")),//The initial y-coordinate of the popup layer
Downx = E.clientx,//mouse pressed, mouse x coordinate
DownY = E.clienty; The y-coordinate of the mouse when the mouse is pressed
               
Binding Mouse Move Events
$ ("body"). Bind ("MouseMove", function (es) {
               
EndX = Es.clientx-downx + StartX; X-coordinate movement
EndY = Es.clienty-downy + starty; Y-coordinate movement
               
Maximum minimum limit
if (EndX > MaxX)
{
EndX = MaxX;
} else if (EndX < 0)
{
EndX = 0;
}
if (EndY > Maxy)
{
EndY = Maxy;
} else if (EndY < 0)
{
EndY = 0;
}
               
$ (' # ' +idzt[n]). CSS ("Top", endy+ "px");
$ (' # ' +idzt[n]). CSS ("left", endx+ "px");
               
Window.getselection? Window.getselection (). Removeallranges ():d ocument.selection.empty (); Uncheck text
               
});
});
mouse button lift, release move event
$ ("body"). Bind ("MouseUp", function () {
         
$ ("body"). Unbind ("MouseMove");
         
});
}
   
Close window
$ (". Close"). Click (function () {
var m = This.getattribute ("BS"); Find identification
$ (' # ' +idzt[m]). Remove (); Removing pop-up windows
$ (' #zz '). Remove (); Remove Matte
      
})
x + +; Identity increase
}



Css:

. Zhuti
{
Position:absolute;
Z-index:3;
font-size:14px;
border-radius:5px;
box-shadow:0 0 5px White;
Overflow:hidden;
Color: #333;
}
. title
{
Background-color: #E9E9E9;
Vertical-align:middle;
height:25px;
width:100%;
line-height:25px;
Text-indent:1em;
Text-align:center;
Color:rgba (104, 104, 104, 0.98);
font-size:14px;
font-family: "Microsoft Yahei", Sans-serif;
}
. close{
Float:right;
width:35px;
height:25px;
Font-weight:bold;
line-height:25px;
Vertical-align:middle;
Color:white;
font-size:18px;
}
. close:hover
{
Cursor:pointer;
}
. Content
{
Text-indent:1em;
padding-top:20px;
border-bottom:1px solid #dfe4e2;
}
. btnx
{
height:30px;
width:100%;
Text-indent:1em;
margin-top:7px;
}
. btn
{
height:28px;
width:80px;
Float:left;
margin-left:20px;
Color: #333;
}
#zz
{
width:100%;
height:100%;
opacity:0.5;
Display:none;
Background-color: #c6cee8;
Z-index:2;
Position:absolute;
top:0px;
left:0px;
}

JS Pop-up window