Encapsulated dialog plug-in simple extended _javascript technique based on bootstrap modal dialog box

When using the Bootstrap modal dialog box, you need to write the dialog box HTML in the page, if a page has many places need dialog box, that means need to write multiple, feel very troublesome, usually not very accustomed to bootstrap modal dialog box this way, so do a simple encapsulation and expansion, Added custom title, width and height, and centered according to width height.

Default properties:
ID: "Modal",//Bomb window ID
Title: "Dialog",//Pinball window titles
Width: "600",///Windows, not supported for the moment
Height: "500",//window height, does not support%
backdrop:true,//whether the mask is displayed, as in the native bootstrap modal box
keyboard:true,//whether the ESC key exits, as with the native bootstrap modal box
Remote: "" ",//load the distance URL, same as the native bootstrap modal box
callback function after opening openevent:null,//window
callback function after closeevent:null,//window closed
okevent:null//Click OK button callback function
How to use:
1. Through the HTML data-* property definition

Copy Code code as follows:

<a class= "Mzdialog" href= "#" data-remote= "test.html" data-mtitle= "Modal1" Data-id= "M1" data-width= "600" Data-okevent= "OK ()" > Play window demo</a>

2. Initialize via JS
$ (". Mzdialog"). Mzdialog ();
Imperfect place and bug, here is just learning reference, oneself can revise perfect
1, Bootstrap-mzdialog plug-in temporarily only 2 buttons, cancel and determine, temporarily does not support the custom button, you can modify the source code to add this feature.
2, can only use the HTML data-* mode definition, does not support JS initialization when configuration parameters, you can modify the source code to extend this function.
3, Width and height recommended do not use percent
4, note that the callback function must be a string format, such as okevent: "OK ()" Here OK function of its own definition of functions, remember to take ();
JS Source:

/*------------------------------------------------------* Encapsulated dialog plugin, simple extension based on bootstrap modal window * Author: muzilei *email : 530624206@qq.com----------------------------------------------------------* * (function ($) {$.fn.mzdialog = function () {var defaults={id: "Modal",//Window ID Title: "dialog",//Window title width: "600",//window width, temporarily does not support% height: "500",// Window height, do not support% backdrop:true,//whether to show the barrier, and the original bootstrap modal box as keyboard:true,//whether to open the ESC key exit, and the native bootstrap modal box as Remote: "",//Load remote U
  
 RL, the same as the native bootstrap modal box openevent:null,//the back function after the window is opened closeevent:null,//the callback function after the window is closed okevent:null//Click OK button callback function};
  
  Dynamic Creation window var creatdialog={init:function (opts) {var _self=this;
  Dynamic Insert window var d=_self.dhtml (opts);
  
  $ ("Body"). Append (d);
    
  var modal=$ ("#" +opts.id);
  
  Initialize window Modal.modal (opts); Window size position var h=modal.height ()-modal.find (". Modal-header"). Outerheight ()-modal.find (". Modal-footer"). Outerheight (
   )-5; Modal.css ({' Margin-left ': opts.width/2*-1, ' margin-top ': opts.height/2*-1, ' top ': ' 50% '}). Find (". Modal-body "). Innerheight (h);
   Modal//Display window. Modal (' show ')///Hide window after removing window HTML. On (' Hidden ', function () {modal.remove ();
   $ (". Modal-backdrop"). Remove ();
   if (opts.closeevent) {eval (opts.closeevent);
   })///window after display. On (' shown ', function () {if (opts.openevent) {eval (opts.openevent);
    //Bind button event $ (this). Find (". OK"). Click (function () {if (opts.okevent) {var ret=eval (opts.okevent);
     if (ret) {modal.modal (' hide ');
  
   }
    }
    });
  }); }, Dhtml:function (o) {return ' <div id= ' +o.id+ ' class= ' modal hide fade ' role= ' dialog ' aria-labelledby= ' Mymodallabel "Aria-hidden=" true "style=" width: ' +o.width+ ' px;height: ' +o.height+ ' px; ><div class= "Modal-header" ><button type= "button" class= "Close" data-dismiss= "modal" aria-hidden= "true" >x</button>
 

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.