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


Posted in Javascript onAugust 10, 2016

在使用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')
  //隐藏窗口后删除窗口html
  .on('hidden', function () {
   modal.remove();
   $(".modal-backdrop").remove();
   if(opts.closeEvent){
   eval(opts.closeEvent);
   }
   })
  //窗口显示后 
  .on('shown', function () {
    
   if(opts.openEvent){
   eval(opts.openEvent);
   }
   
   //绑定按钮事件
   $(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>正在加载...</p></div><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">取消</button><button class="btn btn-primary ok">确定</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);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
原生javascript实现获取指定元素下所有后代元素的方法
Oct 28 Javascript
28个常用JavaScript方法集锦
Jan 14 Javascript
学习JavaScript设计模式之策略模式
Jan 12 Javascript
用js动态添加html元素,以及属性的简单实例
Jul 19 Javascript
jquery 抽奖小程序实现代码
Oct 12 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
Dec 04 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
Jun 08 Javascript
微信小程序开发之tabbar图标和颜色的实现
Oct 17 Javascript
微信小程序实现多选框全选与取消全选功能示例
May 14 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
Jul 17 Javascript
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
JS实现简单移动端鼠标拖拽
Jul 23 Javascript
JS控制静态页面传递参数并获取参数应用
Aug 10 #Javascript
基于JavaScript实现树形下拉框
Aug 10 #Javascript
关于原生js中bind函数的简单实现
Aug 10 #Javascript
Mvc提交表单的四种方法全程详解
Aug 10 #Javascript
mvc中form表单提交的三种方式(推荐)
Aug 10 #Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
Aug 10 #Javascript
浅谈jQuery中的checkbox问题
Aug 10 #Javascript
You might like
解决phpmyadmin 乱码,支持gb2312和utf-8
2006/11/20 PHP
关于Intype一些小问题的解决办法
2008/03/28 PHP
PHP 文件缓存的性能测试
2010/04/25 PHP
奇怪的PHP引用效率问题分析
2012/03/23 PHP
php将字符串转化成date存入数据库的两种方式
2014/04/28 PHP
php获取英文姓名首字母的方法
2015/07/13 PHP
准确获得页面、窗口高度及宽度的JS
2006/11/26 Javascript
textContent在Firefox下与innerText等效的属性
2007/05/12 Javascript
jscript之List Excel Color Values
2007/06/13 Javascript
一个检测表单数据的JavaScript实例
2014/10/31 Javascript
JavaScript动态设置div的样式的方法
2015/12/26 Javascript
Angularjs中使用Filters详解
2016/03/11 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
2016/06/03 Javascript
JavaScript事件学习小结(一)事件流
2016/06/09 Javascript
完美的js div拖拽实例代码
2016/09/24 Javascript
js实现下一页页码效果
2017/03/07 Javascript
zTree获取当前节点的下一级子节点数实例
2017/09/05 Javascript
微信小程序实现默认第一个选中变色效果
2018/07/17 Javascript
小程序实现列表点赞功能
2018/11/02 Javascript
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
JavaScript实现移动端带transition动画的轮播效果
2020/03/24 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
2020/07/17 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
2020/11/02 Javascript
JavaScript手写数组的常用函数总结
2020/11/22 Javascript
利用Python实现命令行版的火车票查看器
2016/08/05 Python
Python实现PS滤镜的旋转模糊功能示例
2018/01/20 Python
20行python代码实现人脸识别
2019/05/05 Python
关于python中的xpath解析定位
2020/03/06 Python
Django User 模块之 AbstractUser 扩展详解
2020/03/11 Python
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
2014年度党员自我评议
2014/09/13 职场文书
2014年工作总结与下年工作计划
2014/11/27 职场文书
毕业实习计划书
2015/01/16 职场文书
带你学习MySQL执行计划
2021/05/31 MySQL
在ubuntu下安装go开发环境的全过程
2022/08/05 Golang
Nginx 502 bad gateway错误解决的九种方案及原因
2022/08/14 Servers