基于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 31 Javascript
node.js中的fs.lstat方法使用说明
Dec 16 Javascript
JavaScript将一个数组插入到另一个数组的方法
Mar 19 Javascript
跟我学习javascript的基本类型和引用类型
Nov 16 Javascript
总结Javascript中数组各种去重的方法
Oct 04 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
Jan 18 Javascript
教你用十行node.js代码读取docx的文本
Mar 08 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
Sep 20 Javascript
在 React、Vue项目中使用SVG的方法
Feb 09 Javascript
解决Webpack 热部署检测不到文件变化的问题
Feb 22 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
May 16 Javascript
在vue中axios设置timeout超时的操作
Sep 04 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
一个简单的PHP入门源程序
2006/10/09 PHP
php array_filter除去数组中的空字符元素
2020/06/21 PHP
apache mysql php 源码编译使用方法
2012/05/03 PHP
CodeIgniter针对数据库的连接、配置及使用方法
2016/03/03 PHP
php自定义函数br2nl实现将html中br换行符转换为文本输入中换行符的方法【与函数nl2br功能相反】
2017/02/17 PHP
PHP中使用mpdf 导出PDF文件的实现方法
2018/10/22 PHP
jquery一般方法介绍 入门参考
2011/06/21 Javascript
js中判断对象是否为空的三种实现方法
2013/12/23 Javascript
node.js中的http.response.write方法使用说明
2014/12/14 Javascript
浅谈JavaScript正则表达式分组匹配
2015/04/10 Javascript
require.js+vue开发微信上传图片组件
2016/10/27 Javascript
BootStrap实现轮播图效果(收藏)
2016/12/30 Javascript
JS简单判断滚动条的滚动方向实现方法
2017/04/28 Javascript
微信小程序 检查接口状态实例详解
2017/06/23 Javascript
js传递数组参数到后台controller的方法
2018/03/29 Javascript
详解vue组件基础
2018/05/04 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
2018/09/05 jQuery
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
2018/10/12 Javascript
axios携带cookie配置详解(axios+koa)
2018/12/28 Javascript
layer实现弹出层自动调节位置
2019/09/05 Javascript
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python中的单下划线和双下划线使用场景详解
2019/09/09 Python
Python使用tkinter模块实现推箱子游戏
2019/10/08 Python
python 调试冷知识(小结)
2019/11/11 Python
tf.concat中axis的含义与使用详解
2020/02/07 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
python3 xpath和requests应用详解
2020/03/06 Python
python使用建议与技巧分享(二)
2020/08/17 Python
PyTorch 导数应用的使用教程
2020/08/31 Python
如何从一个文件档案的尾端新增记录
2016/12/02 面试题
九年级科学教学反思
2014/01/29 职场文书
新农村建设典型材料
2014/05/31 职场文书
环卫工人慰问信
2015/02/15 职场文书
单身申明具结书
2015/02/26 职场文书
大学校园招聘会感想
2015/08/10 职场文书
MySQL慢查询优化解决问题
2022/03/17 MySQL