Code of a custom pop-up dialog box written in JavaScript

Is my design philosophy

The following is the specific js Code.
1. First, define several user-defined functions.
Code
Copy codeThe 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
Copy codeThe 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 ('div ');
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 ('div ');
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 ('div ');
// 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 ('div ');
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 ('div ');
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 ('div ');
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 ('div ');
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
Copy codeThe 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
Copy codeThe Code is as follows:
<Html>
<Head> <title> Custom dialog box </title>
<Style type = "text/css">
. Layout
{
Width: 2000px;
Height: 400px;
Border: solid 1px red;
Text-align: center;
}
</Style>
<Script type = "text/javascript">
// 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 );
}
// 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 ('div ');
Mask.style.css Text = "position: absolute; left: 0; top: 0px; background: # fff; filter: Alpha (Opacity = 30); opacity: 0.5; z-index: 100; width: "+ w +" px; height: "+ h +" px ;";
AppChild (mask );
}
// This is the main form
Var win = createEle ('div ');
Win.style.css Text = "position: absolute; left:" + (sl + cw/2-width/2) + "px; top: "+ (st + ch/2-height/2) +" px; background: # f0f0f0; z-index: 101; width: "+ width +" px; height: "+ height +" px; border: solid 2px # afccfe ;";
// Title Bar
Var tBar = createEle ('div ');
// 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 ('div ');
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 ('div ');
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 ('div ');
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 ('div ');
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 = "disabled ";
// Btn. value = 'close ';
BtnCon. appendChild (btn );
Win. appendChild (btnCon );
AppChild (win );
/*************************************** ******************** ****************************/
// 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 );
If (mask)
{
RemChild (mask );
}
}
}
Function addCheckbox (name, value, id, click)
{
Var str = "<input type = 'checkbox' name = '" + name + "'value ='" + value + "'id = '" + id + "'onclick = '"+ (click = null? '': Click) +" '/> <label for =' "+ id +" '> "+ value +" </label> ";
Return str;
}
Function show ()
{
Var str = "<div> <div style = 'border: dotted 1px blue '> <table cellspacing = '2'> ";
Str + = "<tr> <td colspan = '7' style = 'text-align: Center'> select the region:" + addCheckbox ('all ', 'All (not) select', 'Cities _ all', 'selectall (this, \ "cities_cb \") ') + "</td> </tr> ";
Str + = "<tr> <td>" + addCheckbox ('cities _ cb ', 'changsha City', 'Cities _ cb1 ') + "</td> <td>" + addCheckbox ('cities _ cb ', 'zhuzhou City', 'Cities _ cb2 ') + "</td> <td>" + addCheckbox ('cities _ cb ', 'xiangtan City', 'Cities _ cb3 ') + "</td> <td>" + addCheckbox ('cities _ cb ', 'hengyang City', 'Cities _ cb4 ') + "</td> <td>" + addCheckbox ('cities _ cb ', 'yiyang City', 'Cities _ cb5') + "</td> ";
Str + = "<td>" + addCheckbox ('cities _ cb ', 'changde City', 'Cities _ cb6 ') + "</td> <td>" + addCheckbox ('cities _ cb ', 'yueyang City', 'Cities _ cb7 ') + "</td> </tr> ";
Str + = "<tr> <td>" + addCheckbox ('cities _ cb ', 'shaoyang City', 'Cities _ cb8 ') + "</td> <td>" + addCheckbox ('cities _ cb ', 'chenzhou City', 'Cities _ cb9 ') + "</td> <td>" + addCheckbox ('cities _ cb ', 'loudi City', 'Cities _ cb10') + "</td> ";
Str + = "<td>" + addCheckbox ('cities _ cb ', 'yongzhou', 'Cities _ cb11 ') + "</td> <td>" + addCheckbox ('cities _ cb ', 'huaihua', 'Cities _ cb12 ') + "</td> <td>" + addCheckbox ('cities _ cb ', 'zhangjiajie City', 'Cities _ cb13 ') + "</td> <td>" + addCheckbox ('cities _ cb ', 'xiangxi Autonomous Prefecture', 'Cities _ cb14 ') + "</td> </tr> ";
Str + = "</table> </div> <br/> <div style = 'border: dotted 1px blue '> <table cellspacing = '2'> ";
Str + = "<tr> <td colspan = '10' style = 'text-align: Center'> select the category:" + addCheckbox ('all ', 'All (not) select', 'class _ all', 'selectall (this, \ "class_cb \") ') + "</td> </tr> ";
Str + = "<tr> <td>" + addCheckbox ('class _ cb ', 'bi', 'class _ cb1 ') + "</td> <td>" + addCheckbox ('class _ cb ', 'vanadium', 'class _ cb2 ') + "</td> <td>" + addCheckbox ('class _ cb ', 'King', 'class _ cb3 ') + "</td> <td>" + addCheckbox ('class _ cb ', 'Coal', 'class _ cb4 ') + "</td> <td>" + addCheckbox ('class _ cb ', 'manganese', 'class _ cb5 ') + "</td> <td>" + addCheckbox ('class _ cb ', 'molybdenum', 'class _ cb6 ') + "</td> <td>" + addCheckbox ('class _ cb ', 'lead', 'class _ cb7 ') + "</td> <td>" + addCheckbox ('class _ cb ', 'gypsum', 'class _ cb8 ') + "</td> <td>" + addCheckbox ('class _ cb ', 'ishig', 'class _ cb9 ') + "</td> <td>" + addCheckbox ('class _ cb ', 'antimony', 'class _ cb10 ') + "</td> </tr> ";
Str + = "<tr> <td>" + addCheckbox ('class _ cb ', 'tie', 'class _ cb11 ') + "</td> <td>" + addCheckbox ('class _ cb ', 'Copper', 'class _ cb12 ') + "</td> <td>" + addCheckbox ('class _ cb ', 'tungsten', 'class _ cb13 ') + "</td> <td>" + addCheckbox ('class _ cb ', 'si', 'class _ cb14 ') + "</td> <td>" + addCheckbox ('class _ cb ', 'zinc', 'class _ cb15 ') + "</td> <td>" + addCheckbox ('class _ cb ', 'yin', 'class _ cb16 ') + "</td> <td>" + addCheckbox ('class _ cb ', 'fluorite', 'class _ cb17 ') + "</td> <td>" + addCheckbox ('class _ cb ', 'ur', 'class _ cb18 ') + "</td> <td>" + addCheckbox ('class _ cb ', 'rare Earth Oxide', 'class _ cb19 ') + "</td> <td>" + addCheckbox ('class _ cb ', 'spar', 'class _ cb20 ') + "</td> </tr> ";
Str + = "<tr> <td>" + addCheckbox ('class _ cb ', 'bor', 'class _ cb21 ') + "</td> <td>" + addCheckbox ('class _ cb ', 'phosphorus', 'class _ cb22 ') + "</td> <td>" + addCheckbox ('class _ cb ', 'cement limestone', 'class _ cb23 ') + "</td> <td>" + addCheckbox ('class _ cb ', 'flux limestone', 'class _ cb24 ') + "</td> <td>" + addCheckbox ('class _ cb ', 'metallurgical rocks', 'class _ cb25 ') + "</td> <td>" + addCheckbox ('class _ cb ', 'Rock salt', 'class _ cb26 ') + "</td> <td>" + addCheckbox ('class _ cb ', 'mirtan', 'class _ cb27 ') + "</td> <td>" + addCheckbox ('class _ cb ', 'calcium nitrate', 'class _ cb28 ') + "</td> <td>" + addCheckbox ('class _ cb ', 'Groundwater', 'class _ cb29 ') + "</td> <td>" + addCheckbox ('class _ cb ', 'underground hot water', 'class _ cb30 ') + "</td> </tr> ";
Str + = "</table> </div> ";
ShowWindow ('My prompt box ', str, 850,250, true, ['region', fun1, 'specialize', fun2]);
}
Function selectAll (obj, oName)
{
Var checkboxs = document. getElementsByName (oName );
For (var I = 0; I <checkboxs. length; I ++)
{
Checkboxs [I]. checked = obj. checked;
}
}
Function getStr (cbName)
{
Var cbox = document. getElementsByName (cbName );
Var str = "";
For (var I = 0; I <cbox. length; I ++)
{
If (cbox [I]. checked)
{
Str + = "," + cbox [I]. value;
}
}
Str = str. substr (1 );
Return str;
}
Function fun1 ()
{
Var str = getStr ('cities _ cb ');
Alert ('region of your choice: '+ str );
}
Function fun2 ()
{
Var str = getStr ('class _ cb ');
Alert ('the type of your choice is: '+ str );
}
</Script>
</Head>
<Body>
<Div class = "layout"> </div>
<Div class = "layout"> </div>
<Div class = "layout">
<Input type = "button" value = "display" onclick = "show ()"/>
</Div>
</Body>
</Html>

This script runs in ie and firefox through ....