JQuery-based pop-up message plug-in DivAlert trip (1) _ jquery

This DivAlert plug-in, as its name implies, is a page pop-up box, which is something like MessageBox. Show () in Winform. I have been thinking about Javascript, Ajax, jQuery, and so on for a while, but it seems that I haven't written a plug-in yet. Seeing that there are so many bright plug-ins on the jQuery official website, today, I am also tempted to say whether I can write a similar plug-in. I learned about the basic format of the jQuery plug-in. Let's take a look at the basic ideas...
This DivAlert plug-in, as its name implies, is a page pop-up box, which is something like MessageBox. Show () in Winform.
First, let's define some of the most basic parameters:
Plug-in Initialization

The Code is as follows:

(Function ($ ){
$. JDivAlert = function (o ){
// Set the basic information of the plug-in
Var options = o | {};
Options. width = o. width || 300;
Options. height = o. height || 200;
Options. title = o. title | "title ";
Options. content = o. content | "prompt content ";

Then define a method for creating page elements, which can be reused, abbreviated as js:

The Code is as follows:

Function createElement (obj ){
Return $ (document. createElement (obj ));
}

Create background p and set styles

The Code is as follows:

Var $ bgDiv = createElement ('P ')
. Css ({'position': 'absolute ', 'top': '0', 'left': '0', 'z-Index': '123 ', 'filter': 'Alpha (opacity = 70) ', 'backgroundcolor':' #999 ', 'opacity': '0. 7', 'width': document.doc umentElement. clientWidth + "px", 'height': document.doc umentElement. clientHeight + "px "})
. AppendTo ('body ');

Create prompt p

The Code is as follows:

Var $ outDiv = createElement ('P ')
. Css ({'position': 'absolute ', 'top': ($ (window ). height ()-options. height)/2 + $ (window ). scrollTop () + 'px ', 'left': ($ (window ). width ()-options. width)/2 + $ (window ). scrollLeft () + 'px ', 'border': '1px solid # cef', 'zindex': '2016', 'width': options. width + 'px', 'height': options. height + 'px ', 'overflow': 'hidd '})
. AppendTo ('body ');

Create the TITLE section of the p prompt

The Code is as follows:

Var $ titDiv = createElement ("p ")
. Css ({'textin': 'left', 'backgroundcolor': '# 54a1d9', 'padding': '8px', 'cursor ': 'move', 'height ': '20px ', 'vertical-align': 'middle '})
. Html (options. title)
. AppendTo ($ outDiv );

Create content section of prompt p

The Code is as follows:

Var $ conDiv = createElement ("p ")
. Css ({'backgroundcolor': '# fff', 'textign': 'center', 'padding': '12px ', 'height': options. height-$ titDiv. outerHeight ()})
. Html (options. content)
. AppendTo ($ outDiv );

Create close button

The Code is as follows:

Var $ clsBtn = createElement ("img ")
. Attr ('src', 'del.gif ')
. Css ({'cursor ': 'pointer', 'float': 'right '})
. Click (close)
. AppendTo ($ titDiv );

Close the event in the create dialog box:

The Code is as follows:

Function close (){
$ BgDiv. fadeOut ();
$ OutDiv. fadeOut ();
}
}
}) (JQuery );

To see the use of results, in the script part of the page to add the following code (of course, jQuery library file is indispensable, now the latest version is 1.4.2, you can go to the official website to download the http://www.jQuery.com ):

The Code is as follows:

$ (Document). ready (function (){
$. JDivAlert ({
Width: 300,
Height: 300
});
});

It seems that there are still many functions to be improved .. Continue to work...
Package

JQuery-based pop-up message plug-in DivAlert Tour (1)

JQuery-based message reminder plug-in DivAlert Tour (2)

JQuery-based message reminder plug-in DivAlert (3) Recommendation