How to Write a pop-up window using JavaScript

This article describes how to write a pop-up window using JavaScript. This article describes how to write a pop-up window using JavaScript.

ID of each pop-up window
Var x = 0;

Var idzt = new Array ();

Var Window = function (config ){

No duplicate ID
Idzt [x] = "zhui" + x; pop-up window ID

Initialization and receiving Parameters
This. config = {
Width: config. width | 300, width
Height: config. height | 200, height
Buttons: config. buttons | '', no button by default
Title: config. title | 'title', title
Content: config. content | 'content', content
IsMask: config. isMask = false? False: config. isMask | true, whether to mask
IsDrag: config. isDrag = false? False: config. isDrag | true, whether to move
};

Load dialog box
Var w = ($ (window). width ()-this. config. width)/2;
Var h = ($ (window). height ()-this. config. height)/2;

Var nr ="

";
$ ("Body"). append (nr );

Load the pop-up window title
Var content ="

"+ This. config. title +"

×

";
Load the pop-up window content
Var nrh = this. config. height-75;
Content = content +"

"+ This. config. content +"

";
Load button
Content = content +"

"+ This. config. buttons +"

";

Add the title, content, and buttons to the window
('{'{Idzt}x}}.html (content );


Create a Mask Layer
If (this. config. isMask)
{
Var zz ="

";
$ ("Body"). append (zz );
$ ("# Zz" ).css ('display', 'block ');
}

Maximum and minimum limit to avoid moving outside 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)
{
Move the mouse
$ (". Title"). bind ("mousedown", function (e ){

Var n = $ (this). attr ("bs"); obtain the ID

Make the selected to the top
$ (". Zhti" ).css ("z-index", 3 );
Certificate ('{'{idzt}n}}.css ("z-index", 4 );

Take initial coordinates
Var endX = 0, X coordinate after moving
EndY = 0, Y coordinate after moving
StartX = parseint({('{'{idzt}n}}.css ("left"), the initial X coordinate of the pop-up layer
StartY = parseint({('{'{idzt}n}}.css ("top"), the initial Y coordinate of the pop-up layer
DownX = e. clientX: The X coordinate of the mouse when the mouse is pressed.
DownY = e. clientY; Y coordinate of the mouse when the mouse is pressed

Bind mouse movement event
$ ("Body"). bind ("mousemove", function (es ){

EndX = es. clientX-downX + startX; X coordinate movement
EndY = es. clientY-downY + startY; Y coordinate movement

Maximum and minimum limits
If (endX> maxX)
{
EndX = maxX;
} Else if (endX <0)
{
EndX = 0;
}
If (endY> maxY)
{
EndY = maxY;
} Else if (endY <0)
{
EndY = 0;
}

Certificate ('{'{idzt}n}}.css ("top", endY + "px ");
('{'{Idzt}n}}.css ("left", endX + "px ");

Window. getSelection? Window. getSelection (). removeAllRanges (): document. selection. empty (); // deselect the selected text

});
});
Move the mouse up to release the move event
$ ("Body"). bind ("mouseup", function (){

$ ("Body"). unbind ("mousemove ");

});
}

Close Window
$ (". Close"). click (function (){

Var m = this. getAttribute ("bs"); locate the ID
$ ('#' + Idzt [m]). remove (); remove the pop-up window
$ ('# Zz'). remove (); remove the mask

})

X ++; add ID

}

The above is a detailed description of the method for writing pop-up windows using JavaScript. For more information, see other related articles in the first PHP community!