基于bootstrap风格的弹框插件

自己写的一款基于bootstrap风格的弹框插件，暂时只有确认框、提示框。后续功能扩展、bug修改再更新。

  });
 });
 $("#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页面中调用：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!