基于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)

html页面调用

Box">

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

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

猜你在找的Bootstrap相关文章