JQuery Dialog Pop-up-layer dialog box plugin _jquery

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