当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 基于bootstrap风格的弹框插件

基于bootstrap风格的弹框插件

2019年04月01日  | 移动技术网IT编程  | 我要评论

自己写的一款基于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>

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网