JS Rewrite bootstrap style alert/confirm message window

Source: Internet
Author: User

I believe a lot of people are fed up with alert, confirm, and recently doing projects with Bootstrap, by encapsulating a bootstrap-style message box.

The implementation is very simple, bootstrap itself with the modal modal box, looks good:) just wrap it up and use it.

Uncensored no truth, less say more do, on the code.

The project is an ASP. NET MVC architecture, convenient for global invocation, I add the following HTML directly to the Global layout page:

    <!--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">&times;</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);    });

There are some details that need to be perfected, such as Blockui and so on, late, sleep first.

There is no time to complete.

JS Rewrite bootstrap style alert/confirm message window

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.