Compile jQuery plug-ins by yourself to simulate alert, confirm, and jqueryalert

Compile jQuery plug-ins by yourself to simulate alert, confirm, and jqueryalert

Don't say anything. First, there is a picture with the truth :)

 

Currently, most websites do not need their own alert and confirm, because the interface is too stiff. So this plug-in produces...

 

Let's look at the implementation code of the plug-in:

(Function () {$. msgBox = {Alert: function (title, msg) {GenerateHtml ("alert", title, msg); btnOk (); // alert is just a pop-up message, therefore, the callback function callback btnNo () ;}, Confirm: function (title, msg, callback) {GenerateHtml ("confirm", title, msg); btnOk (callback ); btnNo () ;}// generate Html var GenerateHtml = function (type, title, msg) {var _ html = ""; _ html + = '<div id = "mb_box"> </div> <div id = "mb_con"> <span id = "mb_tit">' + title + '</ span> '; _ html + = '<a id = "mb_ico"> x </a> <div id = "mb_msg">' + msg + '</div> <div id =" mb_btnbox "> '; if (type = "alert") {_ html + = '<input id = "mb_btn_ OK" type = "button" value = "OK"/> ';} if (type = "confirm") {_ html + = '<input id = "mb_btn_ OK" type = "button" value = "OK"/> '; _ html + = '<input id = "mb_btn_no" type = "button" value = "cancel"/> ';} _ html + = '</div>'; // you must add _ html to the body before setting the Css style $ ("body "). append (_ html); GenerateCss () ;}// generate Css var GenerateCss = function () {$ ("# mb_box" ).css ({width: '2016', height: '123', zIndex: '123', position: 'fixed', filter: 'Alpha (opacity = 60) ', backgroundColor: 'black', top: '0 ', left: '0', opacity: '0. 6'}); $ ("# mb_con" ).css ({zIndex: '000000', width: '400px ', position: 'fixed', backgroundColor: 'white', borderRadius: '15px '}); $ ("# mb_tit" ).css ({display: 'block', fontSize: '14px', color: '#444', padding: '10px 15px ', backgroundColor:' # DDD ', borderRadius: '15px 15px 0 0', borderBottom: '3px solid # 009BFE', fontWeight: 'bold '}); $ ("# mb_msg" ).css ({padding: '20px ', lineHeight: '20px', borderBottom: '1px dashed # DDD ', fontSize: '13px '}); $ ("# mb_ico" ).css ({display: 'block', position: 'absolute ', right: '10px', top: '9px ', border: '1px solid Gray ', width: '18px', height: '18px ', textAlign: 'center', lineHeight: '16px', cursor: 'pointer ', borderRadius: '12px ', fontFamily: ''}); $ ("# mb_btnbox" ).css ({margin: '15px 0 10px 0', textAlign: 'center '}); $ ("# mb_btn_ OK, # mb_btn_no" ).css ({width: '85px ', height: '30px', color: 'white', border: 'none '}); $ ("# mb_btn_ OK" ).css ({backgroundColor: '# 168bbb'}); $ ("# mb_btn_no" ).css ({backgroundColor: 'Gray ', marginLeft: '20px '}); // close the button hover style in the upper right corner $ ("# mb_ico "). hover (function () {handler (this).css ({backgroundColor: 'red', color: 'white'}) ;}, function () {handler (this).css ({backgroundColor: '# DDD ', color: 'black'}) ;}); var _ widht = document.doc umentElement. clientWidth; // screen width var _ height = document.doc umentElement. clientHeight; // screen height var boxWidth = $ ("# mb_con "). width (); var boxHeight = $ ("# mb_con "). height (); // center the prompt box $ ("# mb_con" ).css ({top: (_ height-boxHeight)/2 + "px", left: (_ widht-boxWidth)/2 + "px"});} // determine the button event var btnOk = function (callback) {$ ("# mb_btn_ OK "). click (function () {$ ("# mb_box, # mb_con "). remove (); if (typeof (callback) = 'function') {callback () ;}}) ;}// cancel the button event var btnNo = function () {$ ("# mb_btn_no, # mb_ico "). click (function () {$ ("# mb_box, # mb_con "). remove ();});}})();

 

The Html code structure is as follows:

<Div id = "mb_box"> </div> <div id = "mb_con"> <span id = "mb_tit"> title </span> <a id = "mb_ico"> x </a> <div id = "mb_msg"> msg </div> <div id = "mb_btnbox"> <input id = "mb_btn_ OK" type = "button" value = "OK"/> <input id = "mb_btn_no" type = "button" value = "cancel"/> </div>

Mb_box is a translucent mask layer that blocks the entire page and does not allow operations. mb_con is a prompt box. The reason why mb_con is not placed in mb_box is that the transparency set for mb_box will affect mb_con and make mb_con transparent. I have also tried background-color: rgba () before. Unfortunately, ie8 and earlier versions are not supported. So we can get the mb_con out and set the z-index to make it above the mb_box.

 

In order to make the plug-in easy to use, the image is not used, and the interface effect is controlled through css. When using the plug-in, you can reference a js file. Css styles are written in js, which may be not flexible, but it is very convenient to use. If you are not satisfied with the interface style or are different from the color style of your website, you can only modify it on your own.

 

As the pop-up layer (div) cannot implement page blocking like the original alert and confirm, it can only be simulated through the callback function. For this reason, the background data operations can only be completed through the callback function and ajax.

 

The Demo is as follows:

<Html xmlns =" http://www.w3.org/1999/xhtml "> <Head> <title> simulate alert and confirm prompt boxes </title> // $ ("# Update"). bind ("click", function () {$. MsgBox. Confirm ("tip", "Are you sure you want to modify it? ");});
</Script> </body> 
 
There are not many codes. If you have any questions, please leave a message :)
 

How to Use and change the jquery plug-in?
If jQuery plug-ins want to use it, there are usually demos or APIs in the plug-ins for reference.
JQuery plug-ins usually release two versions of XXX. js and XXX. min. js to reduce the volume.

If you want to modify the plug-in, you need to use the XXX. js file.

First, you need to know how to use it. First, there is an available demo (you can write it yourself without a demo), and then you can use the webkit kernel or firefox for breakpoint viewing, this is mainly to find the plug-in entry point. Of course, you can also directly view the js Code, which requires a certain degree of foundation.
The last step is to slowly check the implementation function of his code. First, you have to understand how he implemented it, and then you will know how to change it.

I have also written many jQuery plug-ins like simulating alert/confirm/prompt error message prompt boxes to simulate the seamless marquee scrolling pagination controls to drag controls and so on.

The framework of jQuery plug-in is usually written

(Function ($ ){
$. Fn. extend ({
FnKey: function (){}
})
// Or
$. Fn. fnKey = function (){}
}) (JQuery)

The preceding two methods of calling are as follows:

$ ("XXX"). fnKey () for calling

There is also a way to write:
Var fnClass = function (){
This. fnKey = function (){
}
This. props = "";
}

In this way, the call method is
FnClass obj = new fnClass ();
Obj. fnKey ();

The second method is JavaScript object-oriented programming, which requires you to understand it slowly.

How to Use js to simulate alert and submit it after confirmation by confirm
Click OK to continue sending back, and then suppress the cancellation
Assume that <input tpye = submit onclick = alert ('a )/
A prompt box will pop up when you click it. The prompt box will be submitted only after confirmation.
Baidu onclientClick
Tpye = submit.
Tpye = button
<Input tpye = button onclick = alert ('a); your form. submit ()/
Like vbs.
It is recommended that a layer be displayed after confirmation. There are two buttons in it. If you confirm a cancellation, the layer will be hidden. If you confirm the cancellation, the subsequent methods will be added to the specified commit event.
<Asp: Button ID = Button1 runat = server Text = Button OnClientClick = if (! Confirm ('Are you sure you want to delete this record? ') {Return false;}/compile the client code