自己写的一款基于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, confirmCaller, cancelCaller){
var html = '<div class="modal fade" id="tipModal">'
+ '<div class="modal-dialog" style="width:'+PARAMS.width+'px"><div class="modal-content">'
+ '<div class="modal-header header_'+PARAMS.headerBackground+'">'
+ '<a class="close" data-dismiss="modal">×</a>'
+ '<h4 class="modal-title text-center">'+PARAMS.title+'</h4></div>'
+ '<div class="modal-body text-center body_content">'+PARAMS.content+'</div>'
+ '<div class="modal-footer">';
if(type=='confirm'){
html += '<button class="btn btn-default" id="btnCancel">'+PARAMS.cancelbtn+'</button>';
}
html += '<button class="btn btn-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 && 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;
//移动的对象
var obj = $(objMoved)==undefined "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页面中调用:
<body> <div class="box"> <button class="btn btn-default" id="btn_confirm">确认框</button> <button class="btn btn-default" id="btn_cancel">提示框</button> </div> </body> <script src="/UploadFiles/2021-04-02/jquery.min.js">感觉写的不是很好,后面修改了或者扩展了功能再更新。源码会上传到文件。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
bootstrap,弹框插件
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
白云城资源网 Copyright www.dyhadc.com
暂无“基于bootstrap风格的弹框插件”评论...
更新日志
2025年10月27日
2025年10月27日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]