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

Source: Internet
Author: User
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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.