基于bootstrap风格的弹框插件

;(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)

<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>