JQuery Dialog box plug-in

The principle is very simple. JS dynamically constructs a div layer and inserts it into the body. Then, by adjusting the CSS attribute of position to absolute or fixed, it disconnects it from the location of the original document stream. Then it becomes through proper processing and beautification.
Copy codeThe Code is as follows:
<! -- Background covering layer -->
<Div class = "dialog-overlay"> </div>

<! -- Dialog box -->
<Div class = "dialog">
<Div class = "bar">
<Span class = "title"> title </span>
<A class = "close"> [close] </a>
</Div>
<Div class = "content"> content </div>
</Div>

This is the structure of the two div layers. The first background cover layer is created only when necessary. Each div defines a CSS class to facilitate customization of its appearance.

Implementation of some basic functions
Mobile box
In the mousemove event, you only need to calculate the difference between the two moving mouse positions, plus the original top and left of the moved box, which is the new position of the dialog box. The mousemove event must be triggered only when the mouse presses the title bar. Therefore, the mousemove event is bound only when the mousedown event of the title bar is triggered. When the mouse is released, the mousemove event is unbound.

Mousemove and the mouseup that unbinds the mousemove event are not bound to the title bar, but the document. The reason is that sometimes the mouse moves too fast and will be removed from the title bar, at this time, events bound to the title bar will become invalid, but events bound to the document will not.
Copy codeThe Code is 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. clientWidth, offsetWidth and other attributes in IE are a little different from those in other browsers, so do not use these attributes. You can use the width () function in jQuery directly:
Copy codeThe Code is as follows:
Var left = ($ (window). width ()-dialog. width ()/2;
Var top = ($ (window). height ()-dialog. height ()/2;
Dialog.css ({top: top, left: left}); there is no fixed mode in IE6, but it can be simulated using the window. onscroll event:

// The distance from the top dialog box to the top of the visible 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
To enable coexistence of multiple dialogs, a static zIndex variable is used. Each time a new dialog box is created, the auto-increment operation is performed, assign the new value to the z-index of the newly created dialog box to ensure that the last created dialog box is always at the beginning.

External Interface
The plugin is called in the following ways:
Copy codeThe Code is as follows:
Var dlg = new Dialog (content, options );
Dlg. show (); of course, if you only use it in general, it can be simpler:

New Dialog (content, options). show ();
// Or
Dialog (content, options); you can use the following four functions to further control the plug-in:

Show (): Display dialog box
Hide (): hides the dialog box, but does not delete the content in the dialog box.
Close (): close the dialog box to completely delete its content.
SetContent (content): change the content in the dialog box.
Constructor Parameters
The constructor has two parameters. Content and options. Content indicates the content of the dialog box. options indicates the configuration options of the dialog box.

Content can be a string that indicates the displayed content. Or an Object type. If it is an Object type, it must contain the following two attributes: type and value. Type indicates the data type, while value indicates the content of type. Type supports the following types:

Id: displays the content of an ID, but does not contain the content of this ID. Value corresponds to the ID value of an HTML element.
Img: displays an image. The value corresponds to the uri of the image.
Url: the content of a URL is displayed in ajax mode, so it must be under the same domain name. Value is the corresponding URL address.
Iframe: display the content specified by a URL to iframe. It removes some AJAX call restrictions (the returned HTML code cannot contain the head class in the same domain name .). Value is the corresponding URL.
Options is the specific setting of the Dialog action and appearance:

Option
Name	Description	Default Value
Title	Text in the title bar	Title
CloseText	Close button text	[Close]
ShowTitle	Whether to display the title bar. If not, the title and the close button are not displayed.	True
Draggable	Whether the frame can be dragged.	True
Modal	Modal Dialog Box. If yes, the background layer cannot be operated.	True
Center	Whether to center the display. If not, you can use the content in CSS to locate the display.	True
Fixed	Whether to move with the scroll bar in the dialog box.	True
Time	The time when the dialog box is automatically closed, in milliseconds. If the value is 0, the dialog box will not be closed automatically.	0
Id	The ID of the dialog box. If this parameter is set to false, it is automatically generated.	False
Callback Function
Name	Description	Return Value Type
BeforeShow	Call before display. If false is returned, the dialog box is not displayed.	Bool
AfterShow	Call after display.	None
BeforeHide	Call before hiding. If false is returned, the dialog box is not hidden.	Bool
AfterHide	Hidden and called.	None
BeforeClose	Call before closing. If false is returned, the dialog box is not closed.	Bool
AfterClose	It is called after it is disabled.	None

Custom CSS

The plug-in provides a CSS class name for each part of the dialog box, making it easy to customize CSS:

Class Name	Description
. Dialog-overlay	The background cover layer in the modal dialog box.
. Dialog	The CSS of the dialog box.
. Dialog. bar	CSS of the title bar. Contains the title and the close button.
. Dialog. bar. title	The title of the title bar.
. Dialog. bar. close	The close button section of the title bar.
. Dialog. content	Content section.

You can directly modify these CSS classes to make global modifications, or modify a dialog box by adding the class name with the id.
Copy codeThe Code is as follows:
/* Only modify 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: 'did1 '});

Online Demo code
Package and download code