Click the DIV pop-up layer

Source: Internet
Author: User

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 );

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.