jquery Dialog dialog box plug-in instance bullet layer effect

(function ($) {
$.fn.openwidow = function (options) {
var divid = "Dialog" + Math.Round (math.random () * 100);
var settings = {
Id:divid,
WIDTH:300,
HEIGHT:200,
Modal:true,
Buttons: {
},
Show: "Explode",
Hide: "Highlight",
Title: "Hint",
URL: "/test.asp tutorial X",
Close:function () {
$ ("#" + this.id). Remove ();
Debugger
if (document.getElementById (this.id))
Document.body.removechild (document.getElementById (this.id));
}
};
if (options) {
$.extend (settings, options);
}
$ ("Body"). Append (' <div id= "' + settings.id + '" title= "dialog title" ><p class= "Loading" ></p></div > ');
Dialog
$ (' # ' + settings.id). Dialog ({
Autoopen:false,
Title:settings.title,
Width:settings.width,
Height:settings.height,
Modal:true,
Bgiframe:true,
Show:settings.show,
Hide:settings.hide,
Buttons:settings.buttons,
Close:settings.close,
Open:function () {
$ ("#" + settings.id). html (' <iframe src= ' + settings.url + ' "frameborder=" 0 "height=" 100% "width=" 100% "id=" Dialogfra Me "scrolling=" Auto "></iframe>");
},
Resizestop:function () {
$ ("#dialogframe"). CSS Tutorial ("width", parseint (This). CSS ("width")-5);
$ ("#dialogframe"). CSS ("height"), parseint ($ (this). CSS ("height")-5);
}
});

$ (' # ' + settings.id). Dialog ("Open");
return this;
};
}) (jquery);

Now let's see.

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.

<!--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.

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:

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 under IE6, but it can be implemented through Window.onscroll event simulations:

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