基于bootstrap风格的弹框插件

网友投稿 173 2023-06-21


基于bootstrap风格的弹框插件

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

;(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, confirmCallgrBQwKer, cancelCaller){

var html = '

+ '

+ '

+ '×'

+ '

+ '

+ '

if(type=='confirm'){

html += '';

}

html += '';

html += '

$('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;

//移动的grBQwK对象

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 = parseIgrBQwKnt($(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页面中调用:

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


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:bootstrap导航条实现代码
下一篇:bootstrap导航、选项卡实现代码
相关文章

 发表评论

暂时没有评论,来抢沙发吧~