基于bootstrap风格的弹框插件
自己写的一款基于bootstrap风格的弹框插件，暂时只有确认框、提示框。后续功能扩展、bug修改再更新。
;(function($){
//默认参数
varPARAMS;
varDEFAULTPARAMS=
{
width:500,
title:'提示消息',
content:'',
okbtn:'确定',
cancelbtn:'取消',
headerBackground:'info',
vbackdrop:'static',//默认点击遮罩不会关闭modal
vkeyboard:true,//按esc关闭modal
confirmFn:newObject,
cancelFn:newObject
};
$.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){
varhtml='<divclass="modalfade"id="tipModal">'
+'<divclass="modal-dialog"style="width:'+PARAMS.width+'px"><divclass="modal-content">'
+'<divclass="modal-headerheader_'+PARAMS.headerBackground+'">'
+'<aclass="close"data-dismiss="modal">×</a>'
+'<h4class="modal-titletext-center">'+PARAMS.title+'</h4></div>'
+'<divclass="modal-bodytext-centerbody_content">'+PARAMS.content+'</div>'
+'<divclass="modal-footer">';
if(type=='confirm'){
html+='<buttonclass="btnbtn-default"id="btnCancel">'+PARAMS.cancelbtn+'</button>';
}
html+='<buttonclass="btnbtn-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&¶ms!=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();//要先removemodal
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){
returnthis.each(function(){
//鼠标按下时的位置
varmouseDownPosiX,mouseDownPosiY;
//obj的初始位置
varobjPosiX,objPosiY;
//鼠标移动的距离
vartempX,tempY;
//移动的对象
varobj=$(objMoved)==undefined?$(this):$(objMoved);
//是否处于移动状态
varstatus=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"});
}
//判断是否超出窗体
//计算出弹出层距离右边的位置
vardialogRight=parseInt($(window).width())-(parseInt(obj.css("left"))+parseInt(obj.width()));
vardialogBottom=parseInt($(window).height())-(parseInt(obj.css("top"))+parseInt(obj.height()));
varmaxLeft=$(window).width()-obj.width();
varmaxTop=$(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>
<divclass="box">
<buttonclass="btnbtn-default"id="btn_confirm">确认框</button>
<buttonclass="btnbtn-default"id="btn_cancel">提示框</button>
</div>
</body>
<scriptsrc="jquery/jquery.min.js"></script>
<scriptsrc="bootstrap/bootstrap.min.js"></script>
<scriptsrc="js/dialog.js"></script>
<scripttype="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>
感觉写的不是很好，后面修改了或者扩展了功能再更新。源码会上传到文件。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。