[Original] Use blockui to create custom beautiful webpage prompt boxes (instead of confirm and alert)

1. Introduction to blockui

It is a plug-in of the jquery framework and is specially used for prompt boxes and modal windows.

Address: http://www.malsup.com/jquery/block/

The specific usage method and demo are clearly written. I will not describe them one by one.

2. Rewrite alert in Javascript so that all the places where alert is called have a uniform style

Here I provide a JS File

$. Blockui. defaults. overlaycss. backgroundcolor = "# d5d5d5 ";
$. Blockui. defaults. pagemessagecss. Border = "NONE ";
// $. Blockui. defaults. pagemessagecss. backgroundcolor = "# d6d6d6 ";
$. Blockui. defaults. pagemessagecss. Margin = "-50px 0 0-200px ";
$. Blockui. defaults. pagemessagecss. width = "400px ";
$. Blockui. defaults. overlaycss. cursor = 'normal ';
Function confirmer (title, message, callback, callback1, txt1, txt2 ){

If (! Txt1 ){
Txt1 = "OK ";
}

If (! Txt2 ){
Txt2 = "cancel ";
}

VaR DHTML = "";
DHTML + = "<Div class = 'dialogcontainer '> ";
DHTML + = "<Div class = 'title'>" + title + "</div> ";
DHTML + = "<Div class = 'content'>" + message + "</div>"
DHTML + = "<Div class = 'buttons'> ";
DHTML + = "<input type = 'button 'value = '" + txt1 + "'id = 'btn _ confirmer_ OK'/>"
DHTML + = "<input type = 'button 'value = '" + txt2 + "'id = 'btn _ confirmer_cancel'/>"
DHTML + = "</div>"
DHTML + = "</div> ";

$. Blockui (DHTML );
$ ("# Btn_confirmer_ OK"). Click (function (){

$. Unblockui ();
SetTimeout (function (){
$ (Callback );
},500 );
});

$ ("# Btn_confirmer_cancel"). Click (function (){
$. Unblockui ();
If (callback1 ){
$(Callback1 );
}
});
}

Function alert (message, callback ){

VaR DHTML = "";
DHTML + = "<Div class = 'dialogcontainer '> ";
DHTML + = "<Div class = 'title'> message box </div> ";
DHTML + = "<Div class = 'content'>" + message + "</div>"
DHTML + = "<Div class = 'buttons'> ";
DHTML + = "<input type = 'button 'value = ''Id = 'btn _ alert_ OK '/>"

DHTML + = "</div>"
DHTML + = "</div> ";
$. Extend ($. blockui. defaults. pagemessagecss, {border: 'solid 1px #7199b1 '});
$. Blockui (DHTML );
$ ("# Btn_alert_ OK"). Focus ();
$ ("# Btn_alert_ OK"). Click (function (){

$. Unblockui ();
SetTimeout (function (){
Eval (callback );
},500 );
});

}

Here I intentionally changed alert to an upper-case alert, because I think it is not convenient to debug it if I rewrite the previous alert method.

Iii. Resource file to be referenced during page call <link href = "/CSS/dialogui.css" rel = "stylesheet" type = "text/CSS"/>
<SCRIPT type = "text/JavaScript" src = "/JS/blockui. js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "/JS/commondialog. js" charset = "gb2312"> </SCRIPT>

Don't forget to reference jquery, because blockui is a jqery plug-in that uses some of its methods <SCRIPT src = "/JS/jquery-1.2.1.js" type = "text/JavaScript"> </SCRIPT>

Iv. Analyze the CSS file Div. blockui {
Border: 1px solid red;
Background-color: #335577;
}
// The overall Div layer style

. Dialogcontainer {
Width: 400px;
Height: 200px;
Cursor: default;

}
// Style in the prompt box

. Dialogcontainer. Title {
Background-color: #7199b1;
Color: white;
Font: Caption;
Text-align: left;
Padding-top: 3px;
Padding-bottom: 3px;
Padding-left: 5px;
}
// Title Style

. Dialogcontainer. Content {
Font-size: 12px;
Line-Height: 25px;
Height: 160px;
Padding-top: 20px;
Padding-left: 15px;
Text-align: left;
}
// Content style

. Dialogcontainer. Buttons {
Text-align: right;
Padding-Right: 20px;
Padding-bottom: 10px;
}
// Button style

. Dialogcontainer. Buttons input {
Margin-left: 20px;
Text-align: center;
Background-color: # ffffff;
Border-Right: #7199b1 2px solid;
Padding-Right: 8px;
Border-top: # 7499ae 1px solid;
Padding-left: 8px;
Font-size: 14px;
Background-image: URL (../images/anniu/out.gif );
Border-left: # 7499ae 1px solid;
Cursor: hand;
Color: #053152;
Padding-top: 5px;
Padding-bottom: 0px;
Border-bottom: #7199b1 2px solid;
}

How about it? Isn't it easy? Let's go back and make a demo! Please study it together!