基于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 相关文章推荐
基于jQuery中对数组进行操作的方法
Apr 16 Javascript
Firefox和IE兼容性问题及解决方法总结
Oct 08 Javascript
用js传递value默认值的示例代码
Sep 11 Javascript
jquery实现键盘左右翻页特效
Apr 30 Javascript
JavaScript检测原始值、引用值、属性
Jun 20 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
Jan 07 Javascript
小程序实现发表评论功能
Jul 06 Javascript
GOJS+VUE实现流程图效果
Dec 01 Javascript
VUE脚手架的下载和配置步骤详解
Apr 01 Javascript
利用JS响应式修改vue实现页面的input值
Sep 02 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
Mar 03 Javascript
canvas绘制折线路径动画实现
May 12 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 spl_autoload_register实现自动加载研究
2011/12/06 PHP
分享一下贝贝成长进度的php代码
2012/09/14 PHP
php实现的简单检验登陆类
2015/06/18 PHP
Yii2.0 RESTful API 基础配置教程详解
2018/12/26 PHP
eval的两组性能测试数据
2012/08/17 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
2013/03/04 Javascript
js动态修改input输入框的type属性(实现方法解析)
2013/11/13 Javascript
iframe窗口高度自适应的实现方法
2014/01/08 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
2015/11/23 Javascript
原生JavaScript制作微博发布面板效果
2016/03/11 Javascript
第五章之BootStrap 栅格系统
2016/04/25 Javascript
js判断浏览器是否支持严格模式的方法
2016/10/04 Javascript
ionic2 tabs使用 Modal底部tab弹出框
2016/12/30 Javascript
详解js前端代码异常监控
2017/01/11 Javascript
angularjs实现简单的购物车功能
2017/09/21 Javascript
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
2018/10/10 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
2018/10/29 Javascript
Python快速查找list中相同部分的方法
2018/06/27 Python
Django 中间键和上下文处理器的使用
2019/03/17 Python
Python API 自动化实战详解(纯代码)
2019/06/11 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
python实现根据给定坐标点生成多边形mask的例子
2020/02/18 Python
pycharm开发一个简单界面和通用mvc模板(操作方法图解)
2020/05/27 Python
css3实现二维码扫描特效的示例
2020/10/29 HTML / CSS
支票、地址标签、包装纸和慰问卡:Current Catalog
2018/01/30 全球购物
意大利消费电子产品购物网站:SLG Store
2019/12/26 全球购物
餐厅销售主管职责范本
2014/02/19 职场文书
《问银河》教学反思
2014/02/19 职场文书
大学生职业生涯规划书
2014/03/14 职场文书
商务英语专业毕业生求职信
2014/07/06 职场文书
优秀大专毕业生求职信
2014/08/04 职场文书
幼儿园小班个人工作总结
2015/02/12 职场文书
幼儿园小班教学反思
2016/03/03 职场文书
简历中的自我评价应该这样写!
2019/07/12 职场文书
Django使用channels + websocket打造在线聊天室
2021/05/20 Python