Write your own bootstrap-style-based bullet box plugin

I wrote a frame based on the bootstrap style plug-in, temporarily only confirmation box, prompt box. Subsequent feature extensions, bug fixes, and updates.

;(function($){    //Default Parameters    varPARAMS; varDefaultparams ={width:500, Title:' Prompt message ', Content:‘‘, okbtn:Determine, cancelbtn:Cancel, HeaderBackground:' Info ', Vbackdrop:' Static ',//Default Click Matte does not close modalVkeyboard:true,//Press ESC to close modalCONFIRMFN:NewObject, CANCELFN:NewObject}; $.dialog={confirm:function(params) {$.dialog.initparmas (params); $.dialog. Show (' Confirm ',function(e) {if($.isfunction (PARAMS.CONFIRMFN)) {PARAMS.CONFIRMFN (e); }            },             function(f) {if($.isfunction (PARAMS.CANCELFN)) {PARAMS.CANCELFN (f);        }            }); }, Alert:function(params) {$.dialog.initparmas (params); $.dialog. Show (' Alert ',function(e) {if($.isfunction (PARAMS.CONFIRMFN)) {PARAMS.CONFIRMFN (e); }            }, NULL); }, Show:function(Type, Confirmcaller, Cancelcaller) {varhtml = ' <div class= ' modal fade ' id= ' tipmodal ' > ' + ' <div class= ' modal-dialog ' style= ' width: ' +p arams.width+ ' px ' ><div class= "modal-content" > ' + ' <div class= ' Modal-header header_ ' +params.                     Headerbackground+ ' > ' + ' <a class= ' close ' data-dismiss= ' modal ' >&times;</a> ' + ' 
; if(type== ' Confirm ') {HTML+ = ' <button class= "btn btn-default" id= "btncancel" > ' +params.cancelbtn+ ' </button> '; } HTML+ = ' <button class= "btn btn-primary" id= "Btnok" > ' +params.okbtn+ ' </button> '; HTML+ = ' </div></div></div></div> '; $(' Body '). append (HTML); $(' #tipModal '). Modal ({backdrop:params.vbackdrop,keyboard:params.vkeyboard});        $.dialog.setdialogevent (Type, Confirmcaller, Cancelcaller); }, Initparmas:function(params) {if(params!= undefined && params!=NULL) {PARAMS=$.extend ({}, defaultparams, params); }}, Setdialogevent:function(Type, Confirmcaller, Cancelcaller) {Switch(type) { Case' Confirm ':                    $("#btnOk"). Click (function(){                        $(' #tipModal '). Modal (' Hide '); $(' #tipModal '). On (' Hidden.bs.modal ',function(){                            $(' #tipModal '). Remove ();//to remove modal first                            if($.isfunction (Confirmcaller)) {Confirmcaller (true);                    }                                                    });                    }); $("#btnCancel"). Click (function(){                        $(' #tipModal '). Modal (' Hide '); $(' #tipModal '). On (' Hidden.bs.modal ',function(){                            $(' #tipModal '). Remove (); if($.isfunction (Cancelcaller)) {Cancelcaller (false);                    }                                                    });                    });  Break;  Case' Alert ':                    $("#btnOk"). Click (function(){                        $(' #tipModal '). Modal (' Hide '); $(' #tipModal '). On (' Hidden.bs.modal ',function(){                            $(' #tipModal '). Remove (); if($.isfunction (Confirmcaller)) {Confirmcaller (true);                    }                        });                    });  Break;            }; $(' #tipModal '). On (' Hidden.bs.modal ',function(){                $(' #tipModal '). Remove ();            }); $("#tipModal. Close"). Click (function(){                $(' #tipModal '). On (' Hidden.bs.modal ',function(){                    $(' #tipModal '). Remove ();            });            }); //Set the window to drag$ (' #tipModal. Modal-header '). Draggable ($ (' #tipModal. Modal-dialog '));    }    }; Dialogconfirm=function(params) {$.dialog.confirm (params);    }; Dialogalert=function(params) {$.dialog.alert (params); };}) (jQuery);//Drag Layer;(function($) {$.fn.extend ({draggable:function(objmoved) {return  This. each (function(){                //position when the mouse is pressed                varMousedownposix, Mousedownposiy; //initial position of obj                varObjposix, Objposiy; //the distance the mouse moves                vartempx, Tempy; //Moving Objects                varobj = $ (objmoved) ==undefined? $( This): $ (objmoved); //is in a mobile state                varStatus =false; $( This). MouseDown (function(e) {status=true; Mousedownposix=E.pagex; Mousedownposiy=E.pagey; Objposix= Obj.css ("left"). Replace ("px", "" "); Objposiy= Obj.css ("Top"). Replace ("px", "" "); }). MouseUp (function() {Status=false;                 }); $ (document). MouseMove (function(e) {if(status) {tempx= parseint (E.pagex)-parseint (Mousedownposix) +parseint (objposix); Tempy= parseint (E.pagey)-parseint (Mousedownposiy) +parseint (Objposiy); Obj.css ({"Left": tempx + "px", "top": Tempy + "px" }); }                    //determine if the form is out of                    //calculates the position of the pop-up layer from the right                    varDialogright = parseint ($ (window). Width ())-(parseint (Obj.css ("left") +parseint (Obj.width ())); varDialogbottom = parseint ($ (window). Height ())-(parseint (Obj.css ("top") +parseint (Obj.height ())); varMaxleft = $ (window). Width ()-obj.width (); varMaxtop = $ (window). Height ()-obj.height (); if(Parseint (Obj.css ("left")) <=0) {obj.css ("Left", "0px"); }                    if(Parseint (Obj.css ("Top")) <=0) {obj.css ("Top", "0px"); }                    if(dialogright<=0) {obj.css ("Left", maxleft+ ' px '); }                    if(dialogbottom<=0) {obj.css ("Top", maxtop+ ' px '); }}). MouseUp (function() {Status=false; }). MouseLeave (function() {Status=false;            });        }); }    });}) (jQuery)

Called in the HTML page:

<body><div class= "box" > <button class= "btn btn-default" id= "btn_confirm" > Confirmation box </button> <bu Tton class= "btn btn-default" id= "btn_cancel" > Hint box </button></div></body><script src= "jquery/ Jquery.min.js "></script><script src=" bootstrap/bootstrap.min.js "></script><script src=" Js/dialog.js "></script><script type=" Text/javascript ">$(function(){    $("#btn_confirm"). Click (function() {dialogconfirm ({width:500, Content:' Are you sure you want to delete it? ', HeaderBackground:' Info ', Vbackdrop:true,//Default Click Matte does not close modalVkeyboard:true,//Press ESC to close modalCONFIRMFN:function(e) {Dialogalert ({width:300, Content:' True ', HeaderBackground:' Success ', Vbackdrop:' Static ',//Default Click Matte does not close modalVkeyboard:true            //Press ESC to close modal                }); }, CANCELFN:function(f) {alert (f);    }        })    }); $(' #btn_cancel '). Click (function() {Dialogalert ({width:300, Content:' Delete succeeded! ', HeaderBackground:' Error ', Vbackdrop:' Static ',//Default Click Matte does not close modalVkeyboard:true,//Press ESC to close modal        }); });});</script>

The feeling is not written very well, later modified or extended functionality and update. The source code is uploaded to the file.

FileName is: Dialogbycy.rar

Write your own bootstrap-style-based bullet box plugin