When using the bootstrap modal dialog box, you need to write the dialog box html on the page. If there are many places in a page that requires a dialog box, it means that you need to write multiple ones, which feels very troublesome. I am not used to the bootstrap modal dialog box method, so I made a simple encapsulation and expansion, added a custom title, width and height, and displayed in the center according to the width and height.
Default properties:
id:"modal",//pop-up id
title:"dialog",// pop-up title
width:"600", //Popt-up window width, % is not supported for the time being
height:"500", //Popular window height, does not support %
backdrop:true,//Whether the occlusion is displayed, it is the same as the native bootstrap modal box
keyboard:true,// Whether to enable the esc key to exit, it is the same as the native bootstrap modal box
remote:"",//Load remote url, just like the native bootstrap modal box
openEvent:null,//Callback function after pop-up window is opened
closeEvent:null,//Callback function after pop-up window is closed
okEvent:null//Click OK button to callback function
How to use:
1. Define through html data-* attribute
Copy the code as follows: <a href="#" data-remote="test.html" data-mtitle="modal1" data-id="m1" data-width="600" data-okEvent="ok()">Pop-up demo</a>
2. Initialize through js
$(".mzDialog").mzDialog();
Improper places and bugs, here is just a reference for learning and you can modify and improve them yourself
1. The bootstrap-mzDialog plug-in has only 2 buttons at the moment. Cancel and confirm, and custom buttons are not supported yet. You can modify the source code and add this function.
2. You can only use the html data-* method to define it. You do not support configuration parameters during js initialization. You can modify the source code and extend this function by yourself.
3. Weight and height should not be used.
4. Note that the callback function here must be in a string format, such as okEvent: "ok()". Here, the function defined by the ok function itself, remember to include ();
js source code:
/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- backdrop:true,//Whether the occlusion is displayed, the same as the native bootstrap modal box keyboard:true,//Whether the esc key is enabled to exit, the same as the native bootstrap modal box remote:"",//Load the remote url, the same as the native bootstrap modal box openEvent:null,//Calling the callback function closeEvent:null,//Calling the pop-up function okEvent:null//Click the OK button to callback function}; //Dynamic creation window var createDialog={ 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 //Show window.modal('show') //Delete the window after hiding the window 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); } //Binding 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+'" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div><button type="button" data-dismiss="modal" aria-hidden="true">×</button><h3 id="myModalLabel">'+o.title+'</h3></div><div><p>Loading...</p></div><div><button data-dismiss="modal" aria-hidden="true">Cancel</button><button>Confirm</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);The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.