A custom pop-up dialog code written in JavaScript_javascript skills

The picture below is my design idea

The following is the specific js code
1. First define several custom functions
Code

Copy 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 child elements in body
function appChild(eleName)
{
return document.body.appendChild(eleName);
}
//Remove child elements from body
function remChild(eleName)
{
return document.body.removeChild(eleName);
}

2, Specific form implementation code
Code

Copy code The code is as follows:

//Pop-up window, title (html form), html, width, height, whether it is a modal dialog box (true, false), button (the close button is the default, the format is ['button 1', fun1 , 'Button 2', fun2] array form, the front is the button value, and the back is the button onclick event)
function showWindow(title,html,width,height,modal,buttons)
{
//Avoid Window is too small
if (width {
width = 300;
}
if (height {
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;
//The width and height of the body
var sw = document.body.scrollWidth;
var sh = document.body.scrollHeight ;
//The distance between the top of the visible area and the top and left side 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 window being too large
if (width > w)
{
width = w;
}
if (height > h)
{
height = h;
}
//If modal is true, that is, a modal dialog box, a transparent mask must be created membrane
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;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.cssText = "margin:0;width:" width "px;height:25px;background:url(top-bottom.png);cursor:move;";
//The text part in the title bar
var titleCon = createEle('div');
titleCon.style.cssText = "float:left;margin:3px;";
titleCon.innerHTML = title;//firefox does not support innerText, so innerHTML is used here
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 = "×";
tBar.appendChild(closeCon);
win.appendChild(tBar);
//Form In the content part, overflow in CSS causes a scroll bar to 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);
//Form Bottom button part
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 parameter buttons is an array, a custom button will be created
if (isArray(buttons))
{
var length = buttons.length;
if (length > 0)
{
if (length % 2 == 0)
{
for (var i = 0 ; i {
//Button array
var btn = createEle('button');
btn.innerHTML = buttons[i];//firefox The value attribute is not supported, so innerHTML is used here
// btn.value = buttons[i];
btn.onclick = buttons[i 1];
btnCon.appendChild(btn);
/ /User fills the space between 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 the drag form event******** *************/
//X coordinate of the mouse stay
var mouseX = 0;
//Y coordinate of the mouse stay
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 side of the body
var toLeft = 0;
//Determine whether the form can be moved
var moveable = false;
//Mouse down event of 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 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 0 && (y height {
win.style.left = x "px";
win.style.top = y "px";
}
}
}
//Put down the mouse event, note that this is document instead of tBar
document.onmouseup = function()
{
moveable = false;
}
}
// Method to get browser events, compatible with IE and Firefox
function getEvent()
{
return window.event || arguments.callee.caller.arguments[0];
}
/ /Close event of the "Close Button" in the top title bar and bottom button bar
btn.onclick = closeCon.onclick = function()
{
remChild(win);
remChild( mask);
}
}

Instance call

Copy code The code is as follows :

str = "Look at the effect of my form";
showWindow('My prompt box',str,850,250,true,['region',fun1,'mineral type ',fun2]);

More complete and practical code, including definition and calling
code

Copy code The code is as follows:

";
str = "";
str = "";
str = "";
str = "";
str = "

请选择矿种：" addCheckbox('all','全（不）选','class_all','selectAll(this,"class_cb")') "
" addCheckbox('class_cb','铋','class_cb1') "	" addCheckbox('class_cb','钒','class_cb2') "	" addCheckbox('class_cb','金','class_cb3') "	" addCheckbox('class_cb','煤','class_cb4') "	" addCheckbox('class_cb','锰','class_cb5') "	" addCheckbox('class_cb','钼','class_cb6') "	" addCheckbox('class_cb','铅','class_cb7') "	" addCheckbox('class_cb','石膏','class_cb8') "	" addCheckbox('class_cb','石煤','class_cb9') "	" addCheckbox('class_cb','锑','class_cb10') "
" addCheckbox('class_cb','铁','class_cb11') "	" addCheckbox('class_cb','铜','class_cb12') "	" addCheckbox('class_cb','钨','class_cb13') "	" addCheckbox('class_cb','锡','class_cb14') "	" addCheckbox('class_cb','锌','class_cb15') "	" addCheckbox('class_cb','银','class_cb16') "	" addCheckbox('class_cb','萤石','class_cb17') "	" addCheckbox('class_cb','铀','class_cb18') "	" addCheckbox('class_cb','稀土氧化物','class_cb19') "	" addCheckbox('class_cb','重晶石','class_cb20') "
" addCheckbox('class_cb','硼','class_cb21') "	" addCheckbox('class_cb','磷','class_cb22') "	" addCheckbox('class_cb','水泥灰岩','class_cb23') "	" addCheckbox('class_cb','熔剂灰岩','class_cb24') "	" addCheckbox('class_cb','冶金白云岩','class_cb25') "	" addCheckbox('class_cb','岩盐','class_cb26') "	" addCheckbox('class_cb','芒硝','class_cb27') "	" addCheckbox('class_cb','钙芒硝','class_cb28') "	" addCheckbox('class_cb','地下水','class_cb29') "	" addCheckbox('class_cb','地下热水','class_cb30') "

";
showWindow('我的提示框',str,850,250,true,['地区',fun1,'矿种',fun2]);
}
function selectAll(obj,oName)
{
var checkboxs = document.getElementsByName(oName);
for(var i=0;i{
checkboxs[i].checked = obj.checked;
}
}
function getStr(cbName)
{
var cbox = document.getElementsByName(cbName);
var str = "";
for (var i=0;i{
if(cbox[i].checked)
{
str = "," cbox[i].value;
}
}
str = str.substr(1);
return str;
}
function fun1()
{
var str = getStr('cities_cb');
alert('你选择的地区为：' str);
}
function fun2()
{
var str = getStr('class_cb');
alert('你选择的矿种为：' str);
}

此脚本在ie，firefox浏览器下运行通过。。。。