JavaScript writes a custom pop-up dialog box code _javascript tips

The diagram below is my idea of design

The following is the specific JS code
1, first define several custom functions
Code

Copy Code code as follows:

Determines whether an array
function IsArray (v)
{
Return v && typeof v.length = = ' number ' && typeof v.splice = = ' function ';
}
Creating elements
function Createele (tagName)
{
Return document.createelement (TagName);
}
To add a child element to the body
function Appchild (elename)
{
Return Document.body.appendChild (Elename);
}
To remove a child element from the body
function Remchild (elename)
{
Return Document.body.removeChild (Elename);
}

2, the specific form implementation code
Code

Copy Code code as follows:

Pop-up window, title (HTML form), HTML, width, height, modal dialog (True,false), button (Close button is default, format is [' button 1 ', Fun1, ' button 2 ', fun2] array form, Front for button value, button onclick event followed)
function ShowWindow (title,html,width,height,modal,buttons)
{
Avoid form too small
if (width < 300)
{
width = 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;
Visible area width and height
var cw = Document.body.clientWidth;
var ch = document.body.clientHeight;
Width and height of body text
var sw = Document.body.scrollWidth;
var sh = document.body.scrollHeight;
Distance from top to top and left of visible area
var st = Document.body.scrollTop;
var sl = Document.body.scrollLeft;
W = CW > SW? CW:SW;
h = ch > sh? Ch:sh;
Prevent form from being too large
if (Width > W)
{
width = w;
}
if (height > H)
{
Height = h;
}
If modal is true, the modal dialog box, create a transparent mask
if (modal)
{
var mask = createele (' div ');
Mask.style.cssText = "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.cssText = "Position:absolute;left:" + (SL + CW/2-WIDTH/2) + "Px;top:" + (St + CH/2-HEIGHT/2) + "Px;backgroun D: #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.cssText = "Margin:0;width:" + width + "px;height:25px;background:url (top-bottom.png); cursor:move;";
The text section in the title bar
var Titlecon = Createele (' div ');
TitleCon.style.cssText = "float:left;margin:3px;";
titlecon.innerhtml = Title;//firefox does not support innertext, so here with InnerHTML
Tbar.appendchild (Titlecon);
"Close button" in the title bar
var Closecon = Createele (' div ');
CloseCon.style.cssText = "float:right;width:20px;margin:3px;cursor:pointer;"; /cursor:hand is not available in Firefox
closecon.innerhtml = "X";
Tbar.appendchild (Closecon);
Win.appendchild (Tbar);
The content part of the form, overflow in the CSS makes the scroll bar appear when the content size exceeds this range
var Htmlcon = Createele (' div ');
HtmlCon.style.cssText = "Text-align:center;width:" + width + "Px;height:" + (HEIGHT-50) + "px;overflow:auto;";
htmlcon.innerhtml = html;
Win.appendchild (Htmlcon);
The button section at the bottom of the form
var Btncon = Createele (' div ');
BtnCon.style.cssText = "width:" + width + "Px;height:25px;text-height:20px;background:url" (top-bottom.png); text-align : center;padding-top:3px; ";
If the argument buttons an array, the 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)
{
Array of buttons
var btn = createele (' button ');
btn.innerhtml = Buttons[i];//firefox does not support the Value property, so here's a InnerHTML
Btn.value = Buttons[i];
Btn.onclick = buttons[i + 1];
Btncon.appendchild (BTN);
Blank between user-filled buttons
var nbsp = createele (' label ');
nbsp.innerhtml = "";
Btncon.appendchild (nbsp);
}
}
}
}
This is the default Close button
var btn = createele (' button ');
Btn.setattribute ("value", "close");
btn.innerhtml = ' close ';
Btn.value = ' close ';
Btncon.appendchild (BTN);
Win.appendchild (Btncon);
Appchild (Win);
/************************************* The following is a drag form event *********************/
The x coordinate of the mouse pause
var mousex = 0;
The y-coordinate of the mouse rest
var mousey = 0;
The distance from the form to the top of the body
var totop = 0;
The distance from the form to the left of the body
var toleft = 0;
Determine if a form can be moved
var moveable = false;
Press the mouse event on 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 mouse Events
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 < h))
{
Win.style.left = x + "px";
Win.style.top = y + "px";
}
}
}
Drop mouse events, note that this is document rather than Tbar
Document.onmouseup = function ()
{
moveable = false;
}
}
Ways to get browser events, compatible with IE and Firefox
function GetEvent ()
{
return Window.event | | Arguments.callee.caller.arguments[0];
}
Close button on the top of the title bar and the bottom button bar
Btn.onclick = Closecon.onclick = function ()
{
Remchild (Win);
Remchild (mask);
}
}

Instance calls

Copy Code code as follows:

str = "Look at my form effect";
ShowWindow (' My cue box ', str,850,250,true,[' area ', fun1, ' Mine seed ', fun2]);

More complete and practical code, including definition and invocation
Code

Copy Code code as follows:

<style type = "Text/css" >
. layout
{
width:2000px;
height:400px;
Border:solid 1px red;
Text-align:center;
}
</style>
<script type= "Text/javascript" >
Determines whether an array
function IsArray (v)
{
Return v && typeof v.length = = ' number ' && typeof v.splice = = ' function ';
}
Creating elements
function Createele (tagName)
{
Return document.createelement (TagName);
}
To add a child element to the body
function Appchild (elename)
{
Return Document.body.appendChild (Elename);
}
To remove a child element from the body
function Remchild (elename)
{
Return Document.body.removeChild (Elename);
}
Pop-up window, title (HTML form), HTML, width, height, modal dialog (True,false), button (Close button is default, format is [' button 1 ', Fun1, ' button 2 ', fun2] array form, Front for button value, button onclick event followed)
function ShowWindow (title,html,width,height,modal,buttons)
{
Avoid form too small
if (width < 300)
{
width = 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;
Visible area width and height
var cw = Document.body.clientWidth;
var ch = document.body.clientHeight;
Width and height of body text
var sw = Document.body.scrollWidth;
var sh = document.body.scrollHeight;
Distance from top to top and left of visible area
var st = Document.body.scrollTop;
var sl = Document.body.scrollLeft;
W = CW > SW? CW:SW;
h = ch > sh? Ch:sh;
Prevent form from being too large
if (Width > W)
{
width = w;
}
if (height > H)
{
Height = h;
}
If modal is true, the modal dialog box, create a transparent mask
if (modal)
{
var mask = createele (' div ');
Mask.style.cssText = "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.cssText = "Position:absolute;left:" + (SL + CW/2-WIDTH/2) + "Px;top:" + (St + CH/2-HEIGHT/2) + "Px;backgroun D: #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.cssText = "Margin:0;width:" + width + "px;height:25px;background:url (top-bottom.png); cursor:move;";
The text section in the title bar
var Titlecon = Createele (' div ');
TitleCon.style.cssText = "float:left;margin:3px;";
titlecon.innerhtml = Title;//firefox does not support innertext, so here with InnerHTML
Tbar.appendchild (Titlecon);
"Close button" in the title bar
var Closecon = Createele (' div ');
CloseCon.style.cssText = "float:right;width:20px;margin:3px;cursor:pointer;"; /cursor:hand is not available in Firefox
closecon.innerhtml = "X";
Tbar.appendchild (Closecon);
Win.appendchild (Tbar);
The content part of the form, overflow in the CSS makes the scroll bar appear when the content size exceeds this range
var Htmlcon = Createele (' div ');
HtmlCon.style.cssText = "Text-align:center;width:" + width + "Px;height:" + (HEIGHT-50) + "px;overflow:auto;";
htmlcon.innerhtml = html;
Win.appendchild (Htmlcon);
The button section at the bottom of the form
var Btncon = Createele (' div ');
BtnCon.style.cssText = "width:" + width + "Px;height:25px;text-height:20px;background:url" (top-bottom.png); text-align : center;padding-top:3px; ";
If the argument buttons an array, the 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)
{
Array of buttons
var btn = createele (' button ');
btn.innerhtml = Buttons[i];//firefox does not support the Value property, so here's a InnerHTML
Btn.value = Buttons[i];
Btn.onclick = buttons[i + 1];
Btncon.appendchild (BTN);
Blank between user-filled buttons
var nbsp = createele (' label ');
nbsp.innerhtml = "";
Btncon.appendchild (nbsp);
}
}
}
}
This is the default Close button
var btn = createele (' button ');
Btn.setattribute ("value", "close");
btn.innerhtml = "Close";
Btn.value = ' close ';
Btncon.appendchild (BTN);
Win.appendchild (Btncon);
Appchild (Win);
/****************************************************** The following is a drag form event *********************************************** */
The x coordinate of the mouse pause
var mousex = 0;
The y-coordinate of the mouse rest
var mousey = 0;
The distance from the form to the top of the body
var totop = 0;
The distance from the form to the left of the body
var toleft = 0;
Determine if a form can be moved
var moveable = false;
Press the mouse event on 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 mouse Events
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 < h))
{
Win.style.left = x + "px";
Win.style.top = y + "px";
}
}
}
Drop mouse events, note that this is document rather than Tbar
Document.onmouseup = function ()
{
moveable = false;
}
}
Ways to get browser events, compatible with IE and Firefox
function GetEvent ()
{
return Window.event | | Arguments.callee.caller.arguments[0];
}
Close button on the top of the title bar and the bottom button bar
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 ' > Please select the region:" + addcheckbox (' All ', ' full (No) ', ' Cities_all ') , ' SelectAll (this,\ "cities_cb\") + "</td></tr>";
STR + + "<tr><td>" + addcheckbox (' CITIES_CB ', ' Changsha ', ' CITIES_CB1 ') + "</td><td>" + addcheckbox (' CITIES_CB ', ' Zhuzhou ', ' cities_cb2 ') + "</td><td>" + addcheckbox (' CITIES_CB ', ' Xiangtan ', ' cities_cb3 ') + "</td ><td> "+ addcheckbox (' CITIES_CB ', ' Hengyang ', ' cities_cb4 ') +" </td><td> "+ addcheckbox (' CITIES_CB ', ' Yiyang ', ' cities_cb5 ') + "</td>";
STR + + "<td>" + addcheckbox (' CITIES_CB ', ' Changde ', ' cities_cb6 ') + "</td><td>" + addcheckbox (' CITIES_CB ', ' Yueyang ', ' cities_cb7 ') + "</td></tr>";
STR + + "<tr><td>" + addcheckbox (' CITIES_CB ', ' Shaoyang ', ' cities_cb8 ') + "</td><td>" + addcheckbox (' CITIES_CB ', ' Chenzhou ', ' cities_cb9 ') + "</td><td>" + addcheckbox (' CITIES_CB ', ' Loudi ', ' 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 ', ' 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 + + "&LT;TR&GT;&LT;TD colspan= ' style= ' text-align:center ' > Please select mine:" + addcheckbox (' All ', ' full (no) Election ', ' Class_all ', ' SelectAll (this,\ "class_cb\") + "</td></tr>";
STR + + "<tr><td>" + addcheckbox (' CLASS_CB ', ' bismuth ', ' CLASS_CB1 ') + "</td><td>" + addcheckbox (' class _CB ', ' vanadium ', ' class_cb2 ') + "</td><td>" + addcheckbox (' CLASS_CB ', ' Gold ', ' class_cb3 ') + "</td><td>" + AddCheckBox (' CLASS_CB ', ' coal ', ' class_cb4 ') + "</td><td>" + addcheckbox (' CLASS_CB ', ' mn ', ' class_cb5 ') + "</ Td><td> "+ addcheckbox (' class_cb ', ' Mo ', ' class_cb6 ') +" </td><td> "+ addcheckbox (' CLASS_CB ', ' lead ', ' Class_cb7 ') + "</td><td>" + addcheckbox (' class_cb ', ' plaster ', ' class_cb8 ') + "</td><td>" + AddCheckBox (' CLASS_CB ', ' Stone coal ', ' class_cb9 ') + "</td><td>" + addcheckbox (' class_cb ', ' antimony ', ' class_cb10 ') + " </td></tr> ";
STR + + "<tr><td>" + addcheckbox (' CLASS_CB ', ' iron ', ' class_cb11 ') + "</td><td>" + addcheckbox (' CLASS_CB ', ' copper ', ' class_cb12 ') + "</td><td>" + addcheckbox (' class_cb ', ' tungsten ', ' class_cb13 ') + "</td>< Td> "+ addcheckbox (' class_cb ', ' tin ', ' class_cb14 ') +" </td><td> "+ addcheckbox (' CLASS_CB ', ' zinc ', ' Class_ Cb15 ') + "</td><td>" + addcheckbox (' CLASS_CB ', ' Silver ', ' class_cb16 ') + "</td><td>" + addcheckbox (' CLASS_CB ', ' fluorite ', ' class_cb17 ') + "</td><td>" + addcheckbox (' CLASS_CB ', ' uranium ', ' class_cb18 ') + "</td>< Td> "+ addcheckbox (' CLASS_CB ', ' Rare earth oxides ', ' class_cb19 ') +" </td><td> "+ addcheckbox (' CLASS_CB ', ' barite ', ' Class_cb20 ') + "</td></tr>";
STR + + "<tr><td>" + addcheckbox (' class_cb ', ' boron ', ' class_cb21 ') + "</td><td>" + addcheckbox (' CLASS_CB ', ' P ', ' 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 dolomite ') , ' class_cb25 ') + "</td><td>" + addcheckbox (' CLASS_CB ', ' rock salt ', ' class_cb26 ') + "</td><td>" + AddCheckBox (' CLASS_CB ', ' Glauber's salt ', ' class_cb27 ') + "</td><td>" + addcheckbox (' class_cb ', ' calcium sulfate ', ' 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></div>";
ShowWindow (' My cue box ', str,850,250,true,[' area ', fun1, ' Mine seed ', 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 (' Your chosen area is: ' + str ');
}
function fun2 ()
{
var str = getstr (' CLASS_CB ');
Alert (' Your chosen mine is: ' + str ');
}
</script>
<body>
<div class = "Layout" ></div>
<div class = "Layout" ></div>
<div class = "Layout" >
<input type= "button" value= "Display" onclick= "show ()"/>
</div>
</body>

This script runs through the Ie,firefox browser ....