基于bootstrap风格的弹框插件


Posted in Javascript onDecember 28, 2016

自己写的一款基于bootstrap风格的弹框插件,暂时只有确认框、提示框。后续功能扩展、bug修改再更新。

;(function($){
 //默认参数
 var PARAMS;
 var DEFAULTPARAMS = 
     {
      width: 500,
      title: '提示消息',
      content: '',
      okbtn: '确定',
      cancelbtn: '取消',
      headerBackground: 'info',
      vbackdrop: 'static',  //默认点击遮罩不会关闭modal
      vkeyboard: true,   //按esc关闭modal
      confirmFn: new Object,
      cancelFn: new Object
     };
 $.dialog = {
  confirm: function(params){
   $.dialog.initParmas(params);
   $.dialog.Show('confirm', function(e){
    if($.isFunction(PARAMS.confirmFn)){
     PARAMS.confirmFn(e);
    }
   }, 
   function(f){
    if($.isFunction(PARAMS.cancelFn)){
     PARAMS.cancelFn(f);
    }
   });
  },
  alert: function(params){
   $.dialog.initParmas(params);
   $.dialog.Show('alert', function(e){
    if($.isFunction(PARAMS.confirmFn)){
     PARAMS.confirmFn(e);
    }
   }, null);
  },
  Show: function(type, confirmCaller, cancelCaller){
   var html = '<div class="modal fade" id="tipModal">'
      + '<div class="modal-dialog" style="width:'+PARAMS.width+'px"><div class="modal-content">'
      + '<div class="modal-header header_'+PARAMS.headerBackground+'">'
      + '<a class="close" data-dismiss="modal">×</a>'
      + '<h4 class="modal-title text-center">'+PARAMS.title+'</h4></div>'
      + '<div class="modal-body text-center body_content">'+PARAMS.content+'</div>'
      + '<div class="modal-footer">';
   if(type=='confirm'){
    html += '<button class="btn btn-default" id="btnCancel">'+PARAMS.cancelbtn+'</button>';
   }
   html += '<button class="btn btn-primary" id="btnOk">'+PARAMS.okbtn+'</button>';
   html += '</div></div></div></div>';
   $('body').append(html);
   $('#tipModal').modal({backdrop:PARAMS.vbackdrop,keyboard:PARAMS.vkeyboard});
   $.dialog.setDialogEvent(type, confirmCaller, cancelCaller);
  },
  initParmas: function(params){
   if(params!= undefined && params!= null){
    PARAMS = $.extend({}, DEFAULTPARAMS, params);
   }
  },
  setDialogEvent: function(type, confirmCaller, cancelCaller){
   switch(type){
    case 'confirm':
     $("#btnOk").click(function(){
      $('#tipModal').modal('hide');
      $('#tipModal').on('hidden.bs.modal', function(){
       $('#tipModal').remove();    //要先remove modal
       if($.isFunction(confirmCaller)){
        confirmCaller(true);
       }
       
      });
     });
     $("#btnCancel").click(function(){
      $('#tipModal').modal('hide');
      $('#tipModal').on('hidden.bs.modal', function(){
       $('#tipModal').remove();
       if($.isFunction(cancelCaller)){
        cancelCaller(false);
       }
       
      });
     });
     break;
    case 'alert':
     $("#btnOk").click(function(){
      $('#tipModal').modal('hide');
      $('#tipModal').on('hidden.bs.modal', function(){
       $('#tipModal').remove();
       if($.isFunction(confirmCaller)){
        confirmCaller(true);
       }
      });
     });
     break;
   };
   $('#tipModal').on('hidden.bs.modal', function(){
    $('#tipModal').remove();
   });
   $("#tipModal .close").click(function(){
    $('#tipModal').on('hidden.bs.modal', function(){
     $('#tipModal').remove();
    });
   });
   //设置窗口可拖动
   $('#tipModal .modal-header').Draggable($('#tipModal .modal-dialog'));
  }
 };

 dialogConfirm = function(params){
  $.dialog.confirm(params);
 };

 dialogAlert = function(params){
  $.dialog.alert(params);
 };
})(jQuery);

//拖动层
;(function($){
 $.fn.extend({
  Draggable: function(objMoved){
   return this.each(function(){
    //鼠标按下时的位置
    var mouseDownPosiX, mouseDownPosiY;
    //obj的初始位置
    var objPosiX, objPosiY;
    //鼠标移动的距离
    var tempX, tempY;
    //移动的对象
    var obj = $(objMoved)==undefined ? $(this): $(objMoved);

    //是否处于移动状态
    var status = false;

    $(this).mousedown(function(e){
     status = true;
     mouseDownPosiX = e.pageX;
     mouseDownPosiY = e.pageY;
     objPosiX = obj.css("left").replace("px", "");
     objPosiY = obj.css("top").replace("px", "");
    }).mouseup(function(){
     status = false;
    }); 
    $(document).mousemove(function(e){
     if(status){
      tempX = parseInt(e.pageX) - parseInt(mouseDownPosiX) + parseInt(objPosiX);
      tempY = parseInt(e.pageY) - parseInt(mouseDownPosiY) + parseInt(objPosiY);
      obj.css({ "left": tempX + "px", "top": tempY + "px" }); 
     }
     //判断是否超出窗体
     //计算出弹出层距离右边的位置
     var dialogRight = parseInt($(window).width())-(parseInt(obj.css("left"))+parseInt(obj.width()));
     var dialogBottom = parseInt($(window).height())-(parseInt(obj.css("top"))+parseInt(obj.height()));
     var maxLeft = $(window).width()-obj.width();
     var maxTop = $(window).height()-obj.height();
     if(parseInt(obj.css("left"))<=0){
       obj.css("left","0px"); 
     }
     if(parseInt(obj.css("top"))<=0){
      obj.css("top","0px"); 
     }
     if(dialogRight<=0){
      obj.css("left",maxLeft+'px'); 
     }
     if(dialogBottom<=0){
      obj.css("top", maxTop+'px');
     }
    }).mouseup(function(){
     status = false;
    }).mouseleave(function(){
     status = false;
    });
   });
  }
 });
})(jQuery)

html页面中调用:

<body>
<div class="box">
 <button class="btn btn-default" id="btn_confirm">确认框</button>
 <button class="btn btn-default" id="btn_cancel">提示框</button>
</div>
</body>
<script src="jquery/jquery.min.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script src="js/dialog.js"></script>
<script type="text/javascript">
$(function(){
 $("#btn_confirm").click(function(){
  dialogConfirm({
   width: 500,
   content: '确定要删除吗?',
   headerBackground: 'info',
   vbackdrop: true,  //默认点击遮罩不会关闭modal
   vkeyboard: true,   //按esc关闭modal
   confirmFn: function(e){
    dialogAlert({
     width: 300,
     content: 'true',
     headerBackground: 'success',
     vbackdrop: 'static',  //默认点击遮罩不会关闭modal
     vkeyboard: true   //按esc关闭modal
    });
   },
   cancelFn: function(f){
    alert(f);
   }
  })
 });

 $('#btn_cancel').click(function(){
  dialogAlert({
   width: 300,
   content: '删除成功!',
   headerBackground: 'error',
   vbackdrop: 'static',  //默认点击遮罩不会关闭modal
   vkeyboard: true,   //按esc关闭modal
  });
 });
});
</script>

感觉写的不是很好,后面修改了或者扩展了功能再更新。源码会上传到文件。

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

Javascript 相关文章推荐
Javascript 强制类型转换函数
May 17 Javascript
利用javascript/jquery对上传文件格式过滤的方法
Jul 25 Javascript
jquery的Tooltip插件 qtip使用详细说明
Sep 08 Javascript
AngularJs 弹出模态框(model)
Apr 07 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
Jun 16 Javascript
详解网站中图片日常使用以及优化手法
Jan 09 Javascript
微信小程序之MaterialDesign--input组件详解
Feb 15 Javascript
JavaScript伪数组用法实例分析
Dec 22 Javascript
在vue项目中引入highcharts图表的方法(详解)
Mar 05 Javascript
详解搭建一个vue-cli的移动端H5开发模板
Jan 17 Javascript
vue3.0 的 Composition API 的使用示例
Oct 26 Javascript
使用JS前端技术实现静态图片局部流动效果
Aug 05 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
Dec 28 #Javascript
Bootstrap源码解读模态弹出框(11)
Dec 28 #Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
Dec 28 #Javascript
JS简单实现移动端日历功能示例
Dec 28 #Javascript
如何学JavaScript?前辈的经验之谈
Dec 28 #Javascript
js+div+css下拉导航菜单完整代码分享
Dec 28 #Javascript
javascript实现简单的ajax封装示例
Dec 28 #Javascript
You might like
MYSQL数据库初学者使用指南
2006/11/16 PHP
PHP之数组学习
2011/05/29 PHP
php可扩展的验证类实例(可对邮件、手机号、URL等验证)
2015/07/09 PHP
golang与php实现计算两个经纬度之间距离的方法
2016/07/22 PHP
php中pcntl_fork创建子进程的方法实例
2019/03/14 PHP
JavaScript调用ajax获取文本文件内容实现代码
2014/03/28 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
2014/08/16 Javascript
jQuery中data()方法用法实例
2014/12/27 Javascript
Node.js实用代码段之正确拼接Buffer
2016/03/17 Javascript
如何检测JavaScript的各种类型
2016/07/30 Javascript
纯js三维数组实现三级联动效果
2017/02/07 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
2017/07/24 Javascript
Angular2 组件间通过@Input @Output通讯示例
2017/08/24 Javascript
Vue.js 动态为img的src赋值方法
2018/03/14 Javascript
vue-router重定向不刷新问题的解决
2018/06/25 Javascript
jQuery插件实现的日历功能示例【附源码下载】
2018/09/07 jQuery
详解jquery和vue对比
2019/04/16 jQuery
如何在微信小程序里面退出小程序的方法
2019/04/28 Javascript
Vuex实现数据共享的方法
2019/12/20 Javascript
vue下canvas裁剪图片实例讲解
2020/04/16 Javascript
[48:27]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
[43:43]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第一场 11.22
2020/11/24 DOTA
python 文件和路径操作函数小结
2009/11/23 Python
解析Python中的__getitem__专有方法
2016/06/27 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
python Tkinter版学生管理系统
2019/02/20 Python
详解js文件通过python访问数据库方法
2019/03/03 Python
python实现维吉尼亚加密法
2019/03/20 Python
twilio python自动拨打电话,播放自定义mp3音频的方法
2019/08/08 Python
pycharm导入源码的具体步骤
2020/08/04 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
全球酒店比价网:HotelsCombined
2017/06/20 全球购物
印度在线杂货店:bigbasket
2018/08/23 全球购物
印尼在线旅游门户网站:NusaTrip
2019/11/01 全球购物
部队万能检讨书
2014/02/20 职场文书
工厂门卫岗位职责
2015/04/13 职场文书