Shows the effect:
Login window
Registration window
The prompt window is the body area of the prompt window. You can enter any content here.
Code: www.code52.net
Code:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Meta name = "Description" content = "pop-up layer"/>
<Meta name = "keywords" content = "Small encapsulation of the pop-up layer. Multiple layers can be displayed on one page."/>
<SCRIPT type = "text/JavaScript" src = "multi_popup.js"> </SCRIPT>
<Title> Demo: Multiple Div window layers are displayed simultaneously in Javascript. </title>
<Style>
/* Organize: Code
Http://www.code52.net/
*/
Div. sample_popup {z-index: + 1 ;}
Div. menu_form_header {
Cursor: Move
}
Div. sample_popup Div. menu_form_header
{
Border-bottom: 0px;
Cursor: default;
Cursor: move;
Width: pixel PX;
Height: 20px;
Line-Height: 24px;
Vertical-align: middle;
Background: # 34a2dc;
Color: # FFF;
Text-Decoration: none;
Font-weight: 900;
Font-size: 13px;
Padding-left: 10px;
Overflow: hidden;
}
Div. sample_popup Div. menu_form_body
{
Border: 3px solid # 34a2dc;
Width: 194px;
Background: # FFF;
Font-size: 12px;
}
Div. sample_popup IMG. menu_form_exit
{
Float: right;
Margin: 5px 5px 0px 0px;
Cursor: pointer;
}
Div. sample_popup form
{
Margin: 0px;
Padding: 8px 10px 10px 10px;
}
. Menu_form_body {
Text-Decoration: none;
}
</Style>
</Head>
<Body>
<Input type = "button" onclick = "popup_show (1)" value = 'logon Windows'/>
<Div class = "sample_popup" id = "popup1" style = "visibility: hidden; display: none;">
<Div class = "menu_form_header" id = "popup_drag1">
Login window
</Div>
<Div class = "menu_form_body">
<Form method = "Post" Action = "">
<Div> name: <input type = "text" class = "input_yd" name = "username"/> </div>
<Div> password: <input type = "text" name = "password"/> </div>
<Div>
The content here can be edited freely.
<Input type = "Submit" value = "OK"/>
</Form>
</Div>
</Div>
</Div>
<Input type = "button" onclick = "popup_show (2)" value = 'register Windows'/>
<Div class = "sample_popup" id = "popup2" style = "visibility: hidden; display: none;">
<Div class = "menu_form_header" id = "popup_drag2">
Registration window
</Div>
<Div class = "menu_form_body">
<Form method = "Post" Action = "">
<Div> your name: <input type = "text" class = "input_yd" name = "username"/> </div>
<Div> your password: <input type = "text" name = "password"/> </div>
<Div> E-mail: <input type = "text" name = "E-mail"/> </div>
<Div>
The content here can be edited freely.
<Input type = "Submit" value = "register"/>
</Form>
</Div>
</Div>
</Div>
<Input type = "button" onclick = "popup_show (3)" value = 'window prompt '/>
<Div class = "sample_popup" id = "popup3" style = "visibility: hidden; display: none;">
<Div class = "menu_form_header" id = "popup_drag3">
Prompt window
</Div>
<Div class = "menu_form_body">
This is the body area of the prompt window. You can enter any content here. <Br/> code: www.code52.net <br/>
</Div>
</Div>
<Br/>
</Body>
</Html>
Below is a JS named multi_popup.js
// Organize: Code www.code52.net
VaR popup_dragging = false;
VaR popup_target;
VaR popup_mousex;
VaR popup_mousey;
VaR popup_mouseposx;
VaR popup_mouseposy;
VaR popup_oldfunction;
Function popup_display (X)
{
VaR win = Window. open ();
For (var I in X) win.doc ument. Write (I + '=' + X [I] + '<br> ');
}
// ----- Popup_mousedown -------------------------------------------------------
Function popup_mousedown (E)
{
VaR Ie = navigator. appname = "Microsoft Internet Explorer ";
If (ie & window. event. Button! = 1) return;
If (! IE & E. Button! = 0) return;
Popup_dragging = true;
Popup_target = This ['target'];
Popup_mousex = ie? Window. event. clientx: E. clientx;
Popup_mousey = ie? Window. event. clienty: E. clienty;
If (IE)
Popup_oldfunction = Document. onselectstart;
Else popup_oldfunction = Document. onmousedown;
If (IE)
Document. onselectstart = new function ("Return false ;");
Else document. onmousedown = new function ("Return false ;");
}
// ----- Popup_mousemove -------------------------------------------------------
Function popup_mousemove (E)
{
If (! Popup_dragging) return;
VaR Ie = navigator. appname = "Microsoft Internet Explorer ";
VaR element = Document. getelementbyid (popup_target );
VaR mousex = ie? Window. event. clientx: E. clientx;
VaR Mousey = ie? Window. event. clienty: E. clienty;
// Modify the distance between the pop-up box and the left side of the container in the browser, in pixels --- start
Element. style. Left = (element. offsetleft + mouseX-popup_mouseX) + 'px ';
Element. style. Top = (element. offsettop + mouseY-popup_mouseY) + 'px ';
// Modify the distance between the pop-up box and the left side of the container in the browser, in pixels --- end
Popup_mousex = ie? Window. event. clientx: E. clientx;
Popup_mousey = ie? Window. event. clienty: E. clienty;
}
// ----- Popup_mouseup ---------------------------------------------------------
Function popup_mouseup (E)
{
If (! Popup_dragging) return;
Popup_dragging = false;
VaR Ie = navigator. appname = "Microsoft Internet Explorer ";
VaR element = Document. getelementbyid (popup_target );
If (IE)
Document. onselectstart = popup_oldfunction;
Else document. onmousedown = popup_oldfunction;
}
// ----- Popup_exit ------------------------------------------------------------
Function popup_exit (E)
{
VaR Ie = navigator. appname = "Microsoft Internet Explorer ";
VaR element = Document. getelementbyid (popup_target );
Popup_mouseup (E );
Element. style. Visibility = 'ddd ';
Element. style. Display = 'none ';
}
// ----- Popup_show ------------------------------------------------------------
Function popup_show (ID)
{
Element = Document. getelementbyid ('popup' + id );
Drag_element = Document. getelementbyid ('popup _ drag' + id );
Exit_element = Document. getelementbyid ('popup _ eg' + id );
Element. style. Position = "absolute ";
Element. style. Visibility = "visible ";
Element. style. Display = "Block ";
Element. style. Left = (document.doc umentelement. scrollleft + popup_mouseposX-10) + 'px ';
Element. style. Top = (document.doc umentelement. scrolltop + popup_mouseposY-10) + 'px ';
Drag_element ['target'] = 'popup' + ID;
Drag_element.onmousedown = popup_mousedown;
Exit_element.onclick = popup_exit;
}
// ----- Popup_mousepos --------------------------------------------------------
Function popup_mousepos (E)
{
VaR Ie = navigator. appname = "Microsoft Internet Explorer ";
Popup_mouseposx = ie? Window. event. clientx: E. clientx;
Popup_mouseposy = ie? Window. event. clienty: E. clienty;
}
// ----- Attach events ---------------------------------------------------------
If (navigator. appname = "Microsoft Internet Explorer ")
Document. attachevent ('onmousedown', popup_mousepos );
Else document. addeventlistener ('mousedown', popup_mousepos, false );
If (navigator. appname = "Microsoft Internet Explorer ")
Document. attachevent ('onmousemove ', popup_mousemove );
Else document. addeventlistener ('mousemove ', popup_mousemove, false );
If (navigator. appname = "Microsoft Internet Explorer ")
Document. attachevent ('onmouseup', popup_mouseup );
Else document. addeventlistener ('mouseup', popup_mouseup, false );
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
