基于bootstrap风格的弹框插件
前端之家收集整理的这篇文章主要介绍了
基于bootstrap风格的弹框插件，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
自己写的一款基于bootstrap风格的弹框插件，暂时只有确认框、提示框。后续功能扩展、bug修改再更新。
提示消息',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',null);
},Show: function(type,confirmCaller,cancelCaller){
var html = '
'
+ '
'
+ '
'
+ '
';
$('body').append(html);
$('#tipModal').modal({backdrop:PARAMS.vbackdrop,keyboard:PARAMS.vkeyboard});
$.dialog.setDialogEvent(type,cancelCaller);
},initParmas: function(params){
if(params!= undefined && params!= null){
PARAMS = $.extend({},DEFAULTPARAMS,params);
}
},setDialogEvent: function(type,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)
