Based on the jquery plug-in pop-up window and confirmation box (you can customize the style)

Today I will share with you a jquery Custom plug-in: MBox.

Don't talk about anything. First, the above picture has the truth :)

Implementation code:

 
  
  

   

    
The code is as follows:
    
Copy code
 
   
 
   

    
(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:

 
  
  

   

    
The code is as follows:
    
Copy code
 
   
 
   

    
<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:

 
  
  

   

    
The code is as follows:
    
Copy code
 
   
 
   

    
<Html xmlns = "http://www.w3.org/1999/xhtml">