The encapsulated dialog plug in is based on a simple extension of the bootstrap modal dialog box

When using bootstrap modal dialog box, you need to write a dialog box html on the page. If a page needs a dialog box in many places, it means that you need to write multiple dialog boxes, which is very troublesome. You are not used to bootstrap modal dialog box at ordinary times, so you have made a simple package and expansion, adding a custom title, width and height, and displaying it according to the width and height.

Default properties:
id: "modal",//Pop-up id
title: "dialog",//Pop-up title
width: "600",//Popup width, temporarily not supported%
height: "500",//Popup height,% not supported
backdrop: true,//Shows Mask, and Native bootstrap Modal Box 1
keyboard: true,//Whether to turn on esc key to exit, just like native bootstrap modal box 1
remote: "",//Load remote url, and native bootstrap modal box 1 sample
openEvent: null,//Callback function after pop-up window opens
closeEvent: null,//Callback function after pop-up window is closed
okEvent: null//Click OK to call back the function
Usage:
1. Definition through the html data-* attribute

<a class="mzDialog" href="#" data-remote="test.html" data-mtitle="modal1" data-id="m1" data-width="600" data-okEvent="ok()"> Pop-up window demo</a>

2. Initialize with js
$(".mzDialog").mzDialog();
Imperfect places and bug, here is only learning reference, you can modify and improve
1. bootstrap-mzDialog plug-in has only 2 buttons for the time being, cancel and confirm. Custom buttons are not supported for the time being. You can modify the source code to add this function.
2. It can only be defined by html data-*. It does not support the configuration parameters when js is initialized. You can modify the source code to expand this function.
3. Percentages are not recommended for width and height
4. Note that the callback function here must be in string format, such as okEvent: "ok ()". Here, ok is a self-defined function, remember to bring ();
js source code:

/*------------------------------------------------------
 * Encapsulated dialog Plug-ins, based on bootstrap Simple extension of modal window 
 * By: muzilei
 *email:530624206@qq.com
----------------------------------------------------------*/
(function ($) {
$.fn.mzDialog = function () {
   var defaults={
   id:"modal",// Pop-up window id
  title:"dialog",// Pop-up title 
  width:"600",// Pop-up window width, temporarily not supported %
  height:"500",// Pop-up window height , Not supported %
  backdrop:true,// Whether to display occlusion, and native bootstrap  Modal frame 1 Sample 
  keyboard:true,// Whether to turn it on esc Key exit, and native bootstrap  Modal frame 1 Sample 
  remote:"",// Load remote url , and native bootstrap  Modal frame 1 Sample 
  openEvent:null,// Callback function after pop-up window is opened 
  closeEvent:null,// Callback function after pop-up window is closed 
  okEvent:null// Click OK to call back the function 
 };
  
 // Create a window dynamically 
 var creatDialog={
 init:function(opts){
  var _self=this;
  
  // Dynamic insertion 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')
  // Delete a window after hiding it html
  .on('hidden', function () {
   modal.remove();
   $(".modal-backdrop").remove();
   if(opts.closeEvent){
   eval(opts.closeEvent);
   }
   })
  // After the window is displayed  
  .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"> × </button><h3 id="myModalLabel">'+o.title+'</h3></div><div class="modal-body"><p> Loading ...</p></div><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true"> Cancel </button><button class="btn btn-primary ok"> Determine </button></div></div>';
  }
 };
  
  return this.each(function () {
     $(this).click(function(){
  var opts = $.extend({},defaults,{
   id:$(this).attr("data-id"),
   title:$(this).attr("data-mtitle"),
   width:$(this).attr("data-width"),
   height:$(this).attr("data-height"),
   backdrop:$(this).attr("data-backdrop"),
   keyboard:$(this).attr("data-keyboard"),
   remote:$(this).attr("data-remote"),
   openEvent:$(this).attr("data-openEvent"),
   closeEvent:$(this).attr("data-closeEvent"),
   okEvent:$(this).attr("data-okEvent")
  });
   
   creatDialog.init(opts);
  });
  });
 
};
 
})(jQuery);