jQuery Dialog popup layer dialog plug-in_jquery

The principle is very simple. Dynamically build a div layer through JS, insert it into the body, and then adjust the CSS property of position to absolute or fixed to separate it from the original document flow position. Then it can be beautified through appropriate processing.

Copy code The code is as follows:

title
[Close]

content part

This is Structure of two div layers, the first background mask layer is only created when needed. Each div defines a CSS class, making it easy to customize its appearance.

Implementation of some basic functions
Move the frame
As long as in the mousemove event, calculate the difference between the two mouse positions, plus the original top and left of the moved frame, that is The new location of the dialog box. The mousemove event only needs to be triggered when the mouse presses the title bar, so the mousemove event is only bound when the mousedown event of the title bar is triggered, and the mousemove event is also unbound when the mouse is released.

mousemove and mouseup that unbind the mousemove event are not bound to the title bar, but to the document. The reason for this is because sometimes when the mouse moves too fast, it will move out of the title bar range. At this time If it is bound to the event on the title bar, it will be invalid, but if it is bound to the document, it will not.

Copy code The 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 achieve. A series of attributes such as clientWidth and offsetWidth under IE seem a bit different from other browsers, so don’t use these attributes. You can directly use the width() function under jQuery:

Copy code The code is as follows:

var left = ($(window).width() - dialog.width ()) / 2;
var top = ($(window).height() - dialog.height()) / 2;
dialog.css({top:top,left:left});IE6 There is no fixed mode, but it can be simulated through the window.onscroll event:

// top The distance from the dialog box to the top of the visual 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 allow multiple dialog boxes to coexist, a static zIndex variable is used to create a new dialog box each time Each time, an auto-increment operation is implemented and the new value is assigned to the z-index of the newly created dialog box, so as to ensure that the last created dialog box is always at the front.

External interface
The plug-in is called in the following way:

Copy code The code is as follows:

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

new Dialog(content, options ).show();
// or
dialog(content, options); You can also use the following four functions to further control the plug-in:

show(): Display the dialog box
hide(): Hide the dialog box, but does not delete the content in the dialog box.
close(): Close the dialog box and completely delete its content.
setContent(content): Change the content in the dialog box.
Constructor parameters
The constructor has two parameters. content and options. content represents the content of the dialog box; options represents the various configuration options of the dialog box.

content can be a string representing the displayed content. Or an Object type. If it is an Object type, it needs to contain the following two attributes: type and value. Type represents the data type, and value is the content corresponding to type. type accepts the following types:

id: displays the content of a certain ID, but does not include the content of the ID itself. value corresponds to the ID value of a certain HTML element.
img: Display an image. value corresponds to the uri of the image.
url: Display the content of a certain URL through ajax, so it must be under the same domain name. value is the corresponding URL address.
iframe: Display the content specified by a URL into an iframe. It removes some restrictions on AJAX calls (with the same domain name, the returned HTML code cannot contain headers, etc.). value is the corresponding URL.
options are specific settings for Dialog behavior and appearance:

选项
名称	描述	默认值
title	标题栏的文本	标题
closeText	关闭按钮文字	[关闭]
showTitle	是否显示标题栏，若为否，则标题和关闭按钮都将不显示。	true
draggable	是否可以拖动框体。	true
modal	模态对话框，若为是，则不可操作背景层。	true
center	是否居中显示，若为否，则通过CSS中的内容进行定位。	true
fixed	对话框是否跟随滚动条移动。	true
time	自动关闭对话框时间，单位毫秒，若为0，表示不会自动关闭。	0
id	对话框的ID。若为false，则表示自动产生。	false
回调函数
名称	描述	返回值类型
beforeShow	在显示之前调用，若返回false，则不显示对话框。	bool
afterShow	显示之后调用。	无
beforeHide	在隐藏之前调用，若返回false，则不隐藏对话框。	bool
afterHide	隐藏之后调用。	无
beforeClose	在关闭之前调用，若返回false，则不关闭对话框。	bool
afterClose	关闭之后调用。	无

Custom CSS

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

类名	描述
.dialog-overlay	模态对话框时，的背景遮盖层。
.dialog	对话框的CSS。
.dialog .bar	标题栏的CSS。包含了标题和关闭按钮。
.dialog .bar .title	标题栏的标题部分。
.dialog .bar .close	标题栏的关闭按钮部分。
.dialog .content	内容部分。

You can directly modify these CSS classes to make global modifications, or you can modify a certain dialog box by adding the id and class name.

Copy code The code is as follows:

/* Only modify the dialog box with the 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