基于bootstrap风格的弹框插件

自己写的一款基于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">&times;</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>

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