封装的dialog插件基于bootstrap模态对话框的简单扩展资源-CSDN文库

138 浏览量 2021-01-19 15:12:53 上传评论收藏 49KB PDF 举报

资源推荐

资源详情

资源评论

封装的封装的dialog插件插件基于基于bootstrap模态对话框的简单扩展模态对话框的简单扩展

在使用bootstrap 模态对话框时需要在页面写对话框html，如果一个页面有许多地方需要对话框，那意味着需要写多个，感觉

很麻烦，平时不太习惯bootstrap 模态对话框这种方式，所以做了个简单封装及扩展，增加了自定义标题，宽度和高度，并根

据宽高居中显示。

默认属性：默认属性：

id:”modal”,//弹窗id

title:”dialog”,//弹窗标题

width:”600″,//弹窗宽度，暂时不支持%

height:”500″,//弹窗高度,不支持%

backdrop:true,//是否显示遮障，和原生bootstrap 模态框一样

keyboard:true,//是否开启esc键退出，和原生bootstrap 模态框一样

remote:””,//加载远程url，和原生bootstrap 模态框一样

openEvent:null,//弹窗打开后回调函数

closeEvent:null,//弹窗关闭后回调函数

okEvent:null//单击确定按钮回调函数

使用方法：使用方法：

1.通过通过html data-*属性定义属性定义

复制代码代码如下:<a class=”mzDialog” href=”#” data-remote=”test.html” data-mtitle=”modal1″ data-id=”m1″ data-

width=”600″ data-okEvent=”ok()”>弹窗demo</a>

2.通过通过js初始化初始化

$(“.mzDialog”).mzDialog();

不完善的地方及bug，这里只是学习参考，自己可以修改完善

1、bootstrap-mzDialog 插件暂时只有2个按钮，取消和确定，暂不支持自定义按钮，自己可以修改源代码添加此功能。

2、只能使用html data-*方式定义，不支持js初始化时配置参数，自己可以修改源码扩展此功能。

3、宽度和高度建议不要使用百分比

4、注意这里回调函数必需是字符串格式，如okEvent:”ok()” 这里ok函数式自己定义的函数，切记要带();

js源码：

/*------------------------------------------------------

*封装的dialog插件，基于bootstrap模态窗口的简单扩展

*作者：muzilei

*email:530624206@qq.com

----------------------------------------------------------*/

(function ($) {

$.fn.mzDialog = function () {

var defaults={

id:"modal",//弹窗id

title:"dialog",//弹窗标题

width:"600",//弹窗宽度，暂时不支持%

height:"500",//弹窗高度,不支持%

backdrop:true,//是否显示遮障，和原生bootstrap 模态框一样

keyboard:true,//是否开启esc键退出，和原生bootstrap 模态框一样

remote:"",//加载远程url，和原生bootstrap 模态框一样

openEvent:null,//弹窗打开后回调函数

closeEvent:null,//弹窗关闭后回调函数

okEvent:null//单击确定按钮回调函数

};

//动态创建窗口

var creatDialog={

init:function(opts){

var _self=this;

//动态插入窗口

var d=_self.dHtml(opts);

$("body").append(d);

var modal=$("#"+opts.id);

//初始化窗口

modal.modal(opts);

//窗口大小位置

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

//显示窗口

.modal('show')

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

内容反馈

weixin_38590790

粉丝: 4
资源: 940

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip