Encapsulation of confirm alert in bootstrap

Html:

<!--System modal Start -    <DivID= "Ycf-alert"class= "Modal">      <Divclass= "Modal-dialog modal-sm">        <Divclass= "Modal-content">          <Divclass= "Modal-header">            <Buttontype= "button"class= "Close"Data-dismiss= "Modal"><spanAria-hidden= "true">X</span><spanclass= "Sr-only">Close</span></Button>            <h5class= "Modal-title"><Iclass= "fa fa-exclamation-circle"></I>[Title]</h5>          </Div>          <Divclass= "Modal-body small">            <P>[Message]</P>          </Div>          <Divclass= "Modal-footer" >            <Buttontype= "button"class= "Btn btn-primary OK"Data-dismiss= "Modal">[Btnok]</Button>            <Buttontype= "button"class= "btn btn-default Cancel"Data-dismiss= "Modal">[Btncancel]</Button>          </Div>        </Div>      </Div>    </Div>  <!--System modal End -

Not much to say, are bootstrap modal style, unfamiliar friends can check bootstrap css, brackets [...] Content will eventually be replaced with the display of our incoming parameters.

The JS package is as follows:

$(function() {window. Modal=function () {    varReg =NewREGEXP ("\\[" ([^\\[\\]]*?) \ \] ", ' IgM '); varALR = $ ("#ycf-alert"); varahtml =alr.html (); //restores the modal HTML as it was closed for replace with the next call    //var _init = function () {    //Alr.on ("Hidden.bs.modal", function (e) {    //$ (this). html (ahtml);    //    });    //}();    /*HTML restore is not done in _init (), there will be a problem when repeated calls, directly in the _alert/_confirm do*/    var_alert =function(options) {alr.html (ahtml); //RecoveryAlr.find ('. Ok '). Removeclass (' btn-success '). addclass (' btn-primary ')); Alr.find ('. Cancel '). Hide ();      _dialog (options); return{on:function(callback) {if(Callback && CallbackinstanceofFunction) {Alr.find ('. Ok '). Click (function() {Callback (true) });    }        }      };    }; var_confirm =function(options) {alr.html (ahtml);//RecoveryAlr.find ('. Ok '). Removeclass (' Btn-primary '). addclass (' btn-success ')); Alr.find ('. Cancel '). Show ();      _dialog (options); return{on:function(callback) {if(Callback && CallbackinstanceofFunction) {Alr.find ('. Ok '). Click (function() {Callback (true) }); Alr.find ('. Cancel '). Click (function() {Callback (false) });    }        }      };    }; var_dialog =function(options) {varOPS ={msg:"Prompt Content", Title:"Action Tips", Btnok:Determine, Btncl:Cancel      };      $.extend (OPS, options);      Console.log (ALR); varhtml = alr.html (). replace (Reg,function(node, key) {return{Title:ops.title, Message:ops.msg, BtnOk:ops.btnok, BtnCancel:ops.btncl      }[key];            });      alr.html (HTML); Alr.modal ({width:500, backdrop:' Static '      }); }    return{alert: _alert, confirm: _confirm}} ();});

Call Method:

// Four options are optional parameters Modal.alert (  {    ' content ',    ' title '    , ' OK ',    btncl:' Cancel '   }); // If you need to add a callback function, add the following directly. On (function (e) {}); // click "OK" e:true // click "Cancel" E:false modal.confirm (  {    "Do you want to remove the role?" "  }"  )function  (e) {    alert ("return result:" + e);  });

：

Http://www.tuicool.com/articles/mMNrIr

Encapsulation of confirm alert in bootstrap