Code _ JavaScript skills for a custom pop-up dialog box written in javascript

Recently, I had nothing to worry about. I made a pop-up dialog box using js. If you need to apply the pop-up dialog box, you can refer to it. Is my design philosophy

The following is the specific js Code.
1. First, define several user-defined functions.
Code

The Code is as follows:

// Determine whether it is an array
Function isArray (v)
{
Return v & typeof v. length = 'number' & typeof v. splice = 'function ';
}
// Create Element
Function createEle (tagName)
{
Return document. createElement (tagName );
}
// Add a child element to the body
Function appChild (eleName)
{
Return document. body. appendChild (eleName );
}
// Remove the child element from the body
Function remChild (eleName)
{
Return document. body. removeChild (eleName );
}

2. Specific form implementation code
Code

The Code is as follows:

// In the pop-up window, the title (in html format), html, width, height, whether it is a mode dialog box (true, false), and buttons (the close button is the default one, the format is ['button 1', fun1, 'button 2', fun2] array. The front is the button value, and the back is the button onclick event)
Function showWindow (title, html, width, height, modal, buttons)
{
// Avoid the form being too small
If (width <300)
{
Length = 300;
}
If (height <200)
{
Height = 200;
}
// Declare the width and height of the mask (that is, the width and height of the entire screen)
Var w, h;
// Width and height of the visible area
Var cw = document. body. clientWidth;
Var ch = document. body. clientHeight;
// Body width and height
Var sw = document. body. scrollWidth;
Var sh = document. body. scrollHeight;
// The distance between the top of the visible area and the left of the body
Var st = document. body. scrollTop;
Var sl = document. body. scrollLeft;
W = cw> sw? Cw: sw;
H = ch> sh? Ch: sh;
// Avoid the form being too large
If (width> w)
{
Width = w;
}
If (height> h)
{
Height = h;
}
// If modal is true, that is, a transparent mask is created in the mode dialog box.
If (modal)
{
Var mask = createEle ('P ');
Mask.style.css Text = "position: absolute; left: 0; top: 0px; background: # fff; filter: Alpha (Opacity = 30); opacity: 0.5; z-index: 10000; width: "+ w +" px; height: "+ h +" px ;";
AppChild (mask );
}
// This is the main form
Var win = createEle ('P ');
Win.style.css Text = "position: absolute; left:" + (sl + cw/2-width/2) + "px; top: "+ (st + ch/2-height/2) +" px; background: # f0f0f0; z-index: 10001; width: "+ width +" px; height: "+ height +" px; border: solid 2px # afccfe ;";
// Title Bar
Var tBar = createEle ('P ');
// Afccfe, dce8ff, 2b2f79
TBar.style.css Text = "margin: 0; width:" + width + "px; height: 25px; background: url(top-bottom.png); cursor: move ;";
// Text section in the title bar
Var titleCon = createEle ('P ');
TitleCon.style.css Text = "float: left; margin: 3px ;";
TitleCon. innerHTML = title; // firefox does not support innerText, so innerHTML is used here
TBar. appendChild (titleCon );
// "Close" in the title bar"
Var closeCon = createEle ('P ');
CloseCon.style.css Text = "float: right; width: 20px; margin: 3px; cursor: pointer;"; // cursor: hand unavailable in firefox
CloseCon. innerHTML = "× ";
TBar. appendChild (closeCon );
Win. appendChild (tBar );
// The content part of the form. overflow in CSS makes the scroll bar appear when the content size exceeds this range.
Var htmlCon = createEle ('P ');
HtmlCon.style.css Text = "text-align: center; width:" + width + "px; height:" + (height-50) + "px; overflow: auto ;";
HtmlCon. innerHTML = html;
Win. appendChild (htmlCon );
// Button at the bottom of the form
Var btnCon = createEle ('P ');
BtnCon.style.css Text = "width:" + width + "px; height: 25px; text-height: 20px; background: url(top-bottom.png); text-align: center; padding-top: 3px; ";
// If the buttons parameter is an array, a Custom button is created.
If (isArray (buttons ))
{
Var length = buttons. length;
If (length> 0)
{
If (length % 2 = 0)
{
For (var I = 0; I <length; I = I + 2)
{
// Button Array
Var btn = createEle ('click ');
Btn. innerHTML = buttons [I]; // firefox does not support the value attribute, so innerHTML is used here.
// Btn. value = buttons [I];
Btn. onclick = buttons [I + 1];
BtnCon. appendChild (btn );
// Blank between user fill buttons
Var nbsp = createEle ('label ');
Nbsp. innerHTML = "";
BtnCon. appendChild (nbsp );
}
}
}
}
// This is the default close button
Var btn = createEle ('click ');
// Btn. setAttribute ("value", "close ");
Btn. innerHTML = 'close ';
// Btn. value = 'close ';
BtnCon. appendChild (btn );
Win. appendChild (btnCon );
AppChild (win );
/************************************ Drag a form event *********************/
// The X coordinate of the mouse
Var mouseX = 0;
// Y coordinate of the mouse position
Var mouseY = 0;
// The distance from the form to the top of the body
Var toTop = 0;
// Distance from the form to the left of the body
Var toLeft = 0;
// Determine whether the form can be moved
Var moveable = false;
// Click an event in the title bar
TBar. onmousedown = function ()
{
Var eve = getEvent ();
Moveable = true;
MouseX = eve. clientX;
MouseY = eve. clientY;
ToTop = parseInt (win. style. top );
ToLeft = parseInt (win. style. left );
// Move the mouse event
TBar. onmousemove = function ()
{
If (moveable)
{
Var eve = getEvent ();
Var x = toLeft + eve. clientX-mouseX;
Var y = toTop + eve. clientY-mouseY;
If (x> 0 & (x + width <w) & y> 0 & (y + height

{
Win. style. left = x + "px ";
Win. style. top = y + "px ";
}
}
}
// Put the mouse down. Note that document is used instead of tBar.
Document. onmouseup = function ()
{
Moveable = false;
}
}
// Method for obtaining browser events, compatible with ie and firefox
Function getEvent ()
{
Return window. event | arguments. callee. caller. arguments [0];
}
// The closing event of the "close button" in the top title bar and the button bar at the bottom
Btn. onclick = closeCon. onclick = function ()
{
RemChild (win );
RemChild (mask );
}
}

Instance call

The Code is as follows:

Str = "view my form effects ";
ShowWindow ('My prompt box ', str, 850,250, true, ['region', fun1, 'specialize', fun2]);

More complete and practical code, including definition and call
Code

The Code is as follows:

Custom dialog box