JQuery Dialog Pop-up-layer dialog box plugin _jquery

Source: Internet
Author: User
The principle is very simple, through JS dynamically build a div layer, insert it into the body, and then by adjusting the position CSS properties for absolute or fixed, leaving the original document flow position. And then through the proper processing and beautification becomes.
Copy Code code as follows:

<!--background cover layer-->
<div class= "Dialog-overlay" ></div>

<!--dialog Box-->
<div class= "Dialog" >
<div class= "Bar" >
<span class= "title" > title </span>
<a class= "Close" >[shutdown]</a>
</div>
<div class= "Content" > Contents section </div>
</div>

This is the structure of the two div layers, and the first background masking layer is created only when it is needed. Each div defines a CSS class that makes it easier to customize its appearance.

Implementation of some basic functions
Move Frame Body
As long as in the MouseMove event, calculate the difference of two times move the mouse position, plus the original top,left of the moved box, is the new position of the dialog box. The MouseMove event only needs to be triggered when the mouse presses the title bar, so the MouseMove event is bound only when the MouseDown event of the title bar is triggered, and the binding of the MouseMove is also lifted when the mouse is released.

The MouseUp of MouseMove and Unbind MouseMove events is not bound to the title bar, but to the document, because sometimes when the mouse moves too fast, it moves out of the title bar range, and if the event bound to the title bar is invalidated, and binding to document is not.
Copy Code code as follows:

var mouse={x:0,y:0};
function Movedialog (event)
{
var e = window.event | | Event
var top = parseint (Dialog.css (' top ')) + (E.CLIENTY-MOUSE.Y);
var left = parseint (Dialog.css (' left ')) + (e.clientx-mouse.x);
Dialog.css ({top:top,left:left});
mouse.x = E.clientx;
Mouse.y = E.clienty;
};
Dialog.find ('. Bar '). MouseDown (function (event) {
var e = window.event | | Event
mouse.x = E.clientx;
Mouse.y = E.clienty;
$ (document). Bind (' MouseMove ', movedialog);
});
$ (document). MouseUp (function (event) {
$ (document). Unbind (' MouseMove ', movedialog);
});

Positioning
Center positioning is easy to implement, ie under the clientwidth, Offsetwidth and other properties and other browsers seem a bit different, so do not use these attributes, you can directly use jquery under the width () function:
Copy Code code as follows:

var left = ($ (window). Width ()-dialog.width ())/2;
var top = ($ (window). Height ()-dialog.height ())/2;
Dialog.css ({top:top,left:left}); IE6 does not have a fixed mode, but can be implemented through the Window.onscroll event simulation:

The distance from the top dialog box to the position of the front of the viewable area.
var top = parseint (Dialog.css (' top '))-$ (document). ScrollTop ();
var left = parseint (Dialog.css (' left '))-$ (document). ScrollLeft ();
$ (window). Scroll (function () {
Dialog.css ({' Top ': $ (document). ScrollTop () + Top, "left": $ (document). ScrollLeft () + left});
});

Z-index
In order to implement multiple dialogs, a static zindex variable is implemented, each time a new dialog box is created, a self increase operation is achieved, and the new value is assigned to the z-index of the newly created dialog box, which guarantees that the last dialog box created is always at the front.

External interface
Plug-ins are invoked in the following ways:
Copy Code code as follows:

var dlg = new Dialog (content, options);
Dlg.show (); Of course, if it's just a general use, it can be simpler:

New Dialog (content, Options). Show ();
Or
Dialog (content, options) You can also control the plug-in further by using the following four functions:

Show (): Display dialog box
Hide (): Hides the dialog box, but does not delete the contents of the dialog box.
Close (): Closes the dialog box and deletes its contents completely.
SetContent (content): Change the contents of the dialog box.
Parameter of constructor
The constructor has two parameters. Content and options. Content represents the contents of the dialog box; options represent the various configuration options for the dialog box.

The content can be a string that represents what is displayed. Or an object type, you need to include the following two attributes: Type and value. Type represents the data type, and value is the corresponding content of type. Type accepts the following types:

ID: Displays the contents of an ID, but does not contain the contents of the ID itself. Value corresponds to the ID value of an HTML element.
IMG: Displays a picture. Value corresponds to the URI of the picture.
URL: Displays the content of a URL by Ajax, so it must be under the same domain name. Value is the corresponding URL address.
IFrame: Displays a URL-specified content into an IFRAME that removes some of the limitations of the AJAX call (the same domain name, which cannot contain the head first in the returned HTML code). )。 Value is the corresponding URL.
Options are specific settings for dialog behavior and appearance:
Options
name Description Default Value
Title Text of the title bar Title
Closetext Close button text Close
Showtitle Whether the title bar is displayed or not, both the caption and the Close button are not displayed. True
Draggable Whether you can drag the frame body. True
Modal Modal dialog box, if yes, you cannot manipulate the background layer. True
Center Whether it is centered or not, is positioned through the content in the CSS. True
Fixed Whether the dialog box follows the scroll bar. True
Time Automatically closes the dialog box time, in milliseconds, 0, which means that it will not automatically close. 0
Id The ID of the dialog box. False to indicate that it is automatically generated. False
callback function
name Description return value type
Beforeshow Called before the display, if False, the dialog box is not displayed. bool
Aftershow Called after the display. No
Beforehide Called before hiding, the dialog box is not hidden if False is returned. bool
Afterhide Called after hiding. No
BeforeClose Called before closing, the dialog box is not closed if False is returned. bool
Afterclose Called after the shutdown. No

customizing CSS

The plugin provides a CSS class name for each part of the dialog box, and it is easy to customize the CSS:

class name Description
. dialog-overlay The background mask layer of the modal dialog box.
. dialog The CSS for the dialog box.
. dialog. Bar The CSS for the title bar. Contains the caption and the Close button.
. dialog. Bar Title The title section of the title bar.
. dialog. Bar Close The Close button portion of the title bar.
. dialog. Content Content section.

You can modify these CSS classes directly, make a global change, or you can modify a dialog box by ID plus class name.

Copy Code code as follows:

/* Modify only the dialog box with ID #dialog. */
#dialog1. Bar
{
Text-transform:lowercase;
}
Specify the ID of the dialog box through the id attribute.
New Dialog (' text ', {ID: ' dialog1 '});

Online Demo Code
Code package download

Related Article

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

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.