JQuery) extended one of the jQuery series to simulate alert, confirm (1)

All code
Copy codeThe Code is as follows:
/**
* @ Author xing
*/
(Function ($ ){
$. Extend ({
Alert: function (html, callback ){
Var dialog = new Dialog ();
Dialog. build ('alert ', callback, html );
},
Confirm: function (html, callback ){
Var dialog = new Dialog ();
Dialog. build ('Confirm', callback, html );
}
});
Var Dialog = function (){
Var render = {
Template: '<div class = "alertParent"> <div class = "alertContent">

TemplateConfirm: '<div class = "alertParent" id = "confirmPanel"> <div class = "alertContent">

/**
* Generate a dialog box as needed
* @ Param {Object} type
* @ Param {Object} callback
* @ Param {Object} html
*/
RenderDialog: function (type, callback, html ){
If (type = 'alert '){
This. renderAlert (callback, html );
} Else {
This. renderConfirm (callback, html );
}
},
/**
* Generate alert
* @ Param {Object} callback
* @ Param {Object} html
*/
RenderAlert: function (callback, html ){
Var temp = $ (this. template). clone (). hide ();
Temp.find('div.alertHtml').html (html );
$ (Document. body). append (temp );
This. setPosition (temp );
Temp. fadeIn ();
This. bindEvents ('alert ', temp, callback );
},
/**
* Generate confirm
* @ Param {Object} callback
* @ Param {Object} html
*/
RenderConfirm: function (callback, html ){
Var temp = $ (this. templateConfirm). clone (). hide ();
Temp.find('div.alertHtml').html (html );
$ (Document. body). append (temp );
This. setPosition (temp );
Temp. fadeIn ();
This. bindEvents ('Confirm', temp, callback );
},
/**
* Set the location of the dialog box.
* @ Param {Object} el
*/
SetPosition: function (el ){
Var width = el. width (),
Height = el. height (),
PageSize = this. getPageSize ();
El.css ({
Top :( pageSize. h-height)/2,
Left :( pageSize. w-width)/2
});
},
/**
* Bind events
* @ Param {Object} type
* @ Param {Object} el
* @ Param {Object} callback
*/
BindEvents: function (type, el, callback ){
If (type = "alert "){
If ($. isFunction (callback )){
$ ('# Sure'). click (function (){
Callback ();
$ ('Div. alertparent'). remove ();
});
} Else {
$ ('# Sure'). click (function (){
$ ('Div. alertparent'). remove ();
});
}
} Else {
If ($. isFunction (callback )){
$ ('# Sure'). click (function (){
Callback ();
$ ('Div. alertparent'). remove ();
});
} Else {
$ ('# Sure'). click (function (){
$ ('Div. alertparent'). remove ();
});
}
$ ('# Cancel'). click (function (){
$ ('Div. alertparent'). remove ();
});
}
},
/**
* Get the page size
*/
GetPageSize: function (){
Return {
W: document.doc umentElement. clientWidth,
H: document.doc umentElement. clientHeight
}
}
}
Return {
Build: function (type, callback, html ){
Render. renderDialog (type, callback, html );
}
}
}
}) (JQuery );

Because our alert does not require selector support, we use the $. extend statement.
Copy codeThe Code is as follows:
$. Extend ({
Alert: function (html, callback ){
},
Confirm: function (html, callback ){
}
});

Next, we declare a monomer to generate this component to the page. This monomer returns a public method build to create this component.
Copy codeThe Code is as follows:
Var Dialog = function (){
Return {
Build: function (type, callback, html ){
Render. renderDialog (type, callback, html );
}
}
}

Next, we declare the HTML string of the component separately.
Copy codeThe Code is as follows:
Var render = {<BR> template: '<div class = "alertParent"> <div class = "alertContent">

</Div> <div class = "btnBar"> <input type = "button" value = "OK" id = "sure"/> </div> </div> ', <BR> templateConfirm: '<div class = "alertParent"
Id = "confirmPanel"> <div class = "alertContent">

Id = "cancel"/> <input type = "button" value = "OK" id = "sure"/> </div> '} <BR>

Filling in
Copy codeThe Code is as follows:
/**
* Generate a dialog box as needed
* @ Param {Object} type
* @ Param {Object} callback
* @ Param {Object} html
*/
RenderDialog: function (type, callback, html ){
If (type = 'alert '){
This. renderAlert (callback, html );
} Else {
This. renderConfirm (callback, html );
}
},
/**
* Generate alert
* @ Param {Object} callback
* @ Param {Object} html
*/
RenderAlert: function (callback, html ){
Var temp = $ (this. template). clone (). hide ();
Temp.find('div.alertHtml').html (html );
$ (Document. body). append (temp );
This. setPosition (temp );
Temp. fadeIn ();
This. bindEvents ('alert ', temp, callback );
},
/**
* Generate confirm
* @ Param {Object} callback
* @ Param {Object} html
*/
RenderConfirm: function (callback, html ){
Var temp = $ (this. templateConfirm). clone (). hide ();
Temp.find('div.alertHtml').html (html );
$ (Document. body). append (temp );
This. setPosition (temp );
Temp. fadeIn ();
This. bindEvents ('Confirm', temp, callback );
},
/**
* Set the location of the dialog box.
* @ Param {Object} el
*/
SetPosition: function (el ){
Var width = el. width (),
Height = el. height (),
PageSize = this. getPageSize ();
El.css ({
Top :( pageSize. h-height)/2,
Left :( pageSize. w-width)/2
});
},
/**
* Bind events
* @ Param {Object} type
* @ Param {Object} el
* @ Param {Object} callback
*/
BindEvents: function (type, el, callback ){
If (type = "alert "){
If ($. isFunction (callback )){
$ ('# Sure'). click (function (){
Callback ();
$ ('Div. alertparent'). remove ();
});
} Else {
$ ('# Sure'). click (function (){
$ ('Div. alertparent'). remove ();
});
}
} Else {
If ($. isFunction (callback )){
$ ('# Sure'). click (function (){
Callback ();
$ ('Div. alertparent'). remove ();
});
} Else {
$ ('# Sure'). click (function (){
$ ('Div. alertparent'). remove ();
});
}
$ ('# Cancel'). click (function (){
$ ('Div. alertparent'). remove ();
});
}
},
/**
* Get the page size
*/
GetPageSize: function (){
Return {
W: document.doc umentElement. clientWidth,
H: document.doc umentElement. clientHeight
}
}

Next is the implementation of the dialog box.
Copy codeThe Code is as follows:
$. Extend ({
Alert: function (html, callback ){
Var dialog = new Dialog ();
Dialog. build ('alert ', callback, html );
},
Confirm: function (html, callback ){
Var dialog = new Dialog ();
Dialog. build ('Confirm', callback, html );
}
});

Call method:
Copy codeThe Code is as follows:
$. Confirm ('Are you sure you want to delete? ', Function (){
Alert ('cccc ');
});

$. Alert ('My id ');

CSS and HTML
Copy codeThe Code is as follows:
Div. alertParent {
Padding: 6px;
Background: # ccc;
Background: rgba (201,201,201, 0.8 );
Width: auto;
Position: absolute;
-Moz-border-radius: 3px;
Font-size: 12px;
Top: 50px;
Left: 50px;
}
Div. alertContent {
Background: # fff;
Width: 350px;
Height: auto;
Border: 1px solid #999;
}
H2.title {
Width: 100%;
Height: 28px;
Background: #0698E9;
Text-indent: 10px;
Font-size: 12px;
Color: # fff;
Line-height: 28px;
Margin: 0;
}
Div. alertHtml {
Background: url(dtips.gif) 0 0 no-repeat;
Height: 50px;
Margin: 10px;
Margin-left: 30px;
Text-indent: 50px;
Line-height: 50px;
Font-size: 14px;
}
Div. btnBar {
Border-top: 1px solid # c6c6c6;
Background: # f8f8f8;
Height: 30px;
}
Div. btnBar input {
Background: url(sure.png) no-repeat;
Border: 0;
Width: 63px;
Height: 28px;
Float: right;
Margin-right: 5px;
}


Html
Copy codeThe Code is as follows:
<Div class = "alertParent"> <BR> <div class = "alertContent"> <BR>

Type = "button" value = "OK"/> <BR> </div> <BR>

Do not laugh. To illustrate the implementation method, I did not improve the Code carefully. I only wrote it within half an hour of writing, so I did not think about it in many places, there are a lot of flaws, and the simulation of alert is implemented in a stupid way, but next time we will implement a component by building a Button, a mask will be added, ajax calls, iframe width and height adaptive and other more powerful functions.