Javascript pop-up layer input box

Javascript pop-up layer input box

This article mainly introduces the javascript pop-up layer input box (sample code ). For more information, see.

As follows:

The Code is as follows:

<Script language = "javascript" type = "text/javascript">

Function alertWin (title, msg, w, h ){

 

Var titleheight = "22px"; // window title height

Var bordercolor = "#666699"; // border color of the window

Var titlecolor = "# FFFFFF"; // The title Color of the window.

Var titlebgcolor = "#666699"; // the background color of the window title

Var bgcolor = "# FFFFFF"; // content background color

Var iWidth = document.doc umentElement. clientWidth; // The width of the window.

Var iHeight = document.doc umentElement. clientHeight; // The height of the window.

 

// Format of the background layer

Var bgObj = document. createElement ("div ");

 

BgObj.style.css Text = "position: absolute; left: 0px; top: 0px; width:" + iWidth + "px; height:" + Math. max (document. body. clientHeight, iHeight) + "px; filter: Alpha (Opacity = 30); opacity: 0.3; background-color: #000000; z-index: 1000 ;";

 

Document. body. appendChild (bgObj );

 

Var iframe2 = document. createElement ("iframe ");

Iframe2.style.css Text = "position: absolute; top: 0px; filter: Alpha (Opacity = 30); opacity: 0.3; background-color: #000000; z-index: 1001; border-style: none; border-width: 0px; border: 0px; width: "+ iWidth +" px; height: "+ iHeight +" px ";

BgObj. appendChild (iframe2 );

 

// Create a pop-up layer

Var msgObj = document. createElement ("div ");

// Set the pop-up layer style

MsgObj.style.css Text = "position: absolute; font: 11px ''; top:" + (iHeight-h)/2 + "px; left:" + (iWidth-w) /2 + "px; width:" + w + "px; height:" + h + "px; text-align: center; border: 1px solid" + bordercolor + "; background-color: "+ bgcolor +"; padding: 1px; line-height: 22px; z-index: 1001 ;";

Document. body. appendChild (msgObj );

// Create a table to accommodate content on the layer

Var table = document. createElement ("table ");

// Place the Table on the pop-up layer

MsgObj. appendChild (table );

// Set the table format

Table.style.css Text = "margin: 0px; border: 0px; padding: 0px ;";

Table. cellSpacing = 0;

// Insert a row to display the title

Var tr = table. insertRow (-1 );

// Insert a cell to hold the title

Var titleBar = tr. insertCell (-1 );

TitleBar.style.css Text = "width: 100%; height:" + titleheight + "px; text-align: left; padding: 3px; margin: 0px; font: bold 13px ' '; color: "+ titlecolor +"; border: 1px solid "+ bordercolor +"; cursor: move; background-color: "+ titlebgcolor;

TitleBar. style. paddingLeft = "10px ";

// Set the title

TitleBar. innerHTML = title;

// Set the Zeng de drag event

Var moveX = 0;

Var moveY = 0;

Var moveTop = 0;

Var moveLeft = 0;

Var moveable = false;

Var docMouseMoveEvent = document. onmousemove;

Var docMouseUpEvent = document. onmouseup;

// Click the title

TitleBar. onmousedown = function (){

Var evt = getEvent ();

Moveable = true;

MoveX = evt. clientX;

MoveY = evt. clientY;

MoveTop = parseInt (msgObj. style. top );

MoveLeft = parseInt (msgObj. style. left );

// Drag the mouse

Document. onmousemove = function (){

If (moveable ){

Var evt = getEvent ();

Var x = moveLeft + evt. clientX-moveX;

Var y = moveTop + evt. clientY-moveY;

If (x> 0 & (x + w <iWidth) & y> 0 & (y + h <iHeight )){

MsgObj. style. left = x + "px ";

MsgObj. style. top = y + "px ";

}

}

};

Document. onmouseup = function (){

If (moveable ){

Document. onmousemove = docMouseMoveEvent;

Document. onmouseup = docMouseUpEvent;

Moveable = false;

MoveX = 0;

MoveY = 0;

MoveTop = 0;

MoveLeft = 0;

}

};

}

 

// Close button event

Var closeBtn = tr. insertCell (-1 );

CloseBtn.style.css Text = "cursor: pointer; text-align: right; padding: 2px; background-color:" + titlebgcolor;

CloseBtn. innerHTML = "<span style = 'font-size: 15pt; color:" + titlecolor + "; '> × </span> ";

CloseBtn. onclick = function (){

Document. body. removeChild (bgObj );

Document. body. removeChild (msgObj );

}

 

// Pop-up message window content

Var msgBox = table. insertRow (-1). insertCell (-1 );

MsgBox.style.css Text = "font: 10pt '';";

MsgBox. colSpan = 2;

MsgBox. innerHTML = msg;

// Content of the Template Name on the layer

Var nameBox = table. insertRow (-1 );

Var nameLable = nameBox. insertCell (-1 );

NameLable.style.css Text = "font: 12pt ''; text-align: center ;";

NameLable. innerHTML = "<br/> enter the ID card number: <br/> ";

Var nametext = nameBox. insertCell (-1 );

Nametext.style.css Text = "font: 12pt ''; text-align: Left; margin-left: 0px ";

Nametext. innerHTML = "<br/> <input type = 'text' value ='' id = 'modalname'/> <br/> ";

// Content of the action button on the layer

Var submitBox = table. insertRow (-1 );

Var submitBtn = submitBox. insertCell (-1 );

SubmitBtn.style.css Text = "text-align: center ;";

SubmitBtn. colSpan = 2;

SubmitBtn. innerHTML = "<br/> <input type = 'button 'value =' confirm 'id = 'savehead' onclick = 'Return GetCark () '/> <br/> ";

Function getEvent (){

Return window. event | arguments. callee. caller. arguments [0];

}

}

</Script>

 

<Input type = "button" value = "Storage Header" onclick = "alertWin ('Identity Information Collection ','', 300,150); "/>