基于bootstrap风格的弹框插件
作者:有点懒惰的小青年 发布时间:2024-05-02 17:32:29
标签: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, 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 ? $(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页面中调用:
<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="jquery/jquery.min.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script src="js/dialog.js"></script>
<script type="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>
感觉写的不是很好,后面修改了或者扩展了功能再更新。源码会上传到文件。


猜你喜欢
- 前言在java中,反斜杠“\”转义是“\”,因此表示一个“\”要使用“\\”,如果是正则表达式,那么表示一个“\”需要用“\\\\”,在my
- SQL Server数据库操作中,在2005以上的版本新增加了一个APPLY表运算符的功能。新增的APPLY表运算符把右表表达式应用到左表表
- 1.Python虚拟环境创建首先我们为什么要创建虚拟环境呢?因为不同的项目所依赖的环境不一样,他们需要不同的第三方库等等。为了避免冲突,所以
- Asp中Server.ScriptTimeOut属性需要注意的一点Server.ScriptTimeout?这个属性给定Asp脚本执行的最大
- 本文实例讲述了Python PyInstaller库基本使用方法。分享给大家供大家参考,具体如下:概述将.py源码转换成无需源代码的可执行文
- 问题有二进制文件中保存了 20 亿个 2 Bytes 的数,需将其读出,每 20000 个数作图,拟合后输出结果。解决# -*- codin
- sqlalchemy的常用数据类型数据类型python数据类型说明Integerint整形Stringstr字符串Floatfloat浮点型
- 前言return语句用于退出函数,向调用方返回一个表达式。return在不带参数的情况下(或者没有写return语句),默认返回None。N
- 这是Pygame zero 最全集合安装Windows系统:按下win+r,输入pip install pyzeropip install
- TensorFlow修改变量值后,需要重新赋值,assign用起来有点小技巧,就是需要需要弄个操作子,运行一下。下面这么用是不行的impor
- 本文实例讲述了Python利用Scrapy框架爬取豆瓣电影。分享给大家供大家参考,具体如下:1、概念Scrapy是一个为了爬取网站数据,提取
- 0.引言利用python开发,借助Dlib库进行人脸识别,然后将检测到的人脸剪切下来,依次排序显示在新的图像上;实现的效果如下图所示,将图1
- 前言第一次尝试用Pyinstaller打包Pytorch,碰见了很多问题,耗费了许多时间!想把这个过程中碰到的问题与解决方法记录一下,方便后
- 介绍方法之前,我们先说说Python的解释器,由于Python是动态编译的语言,和C/C++、Java或者Kotlin等静态语言不同,它是在
- 一段重用很高的ajax代码,可以套用 <!DOCTYPE HTML
- 地图服务是指可以提供数据信息的接口,比如说本地搜索/路线规划等,下面小编给大家整理下百度地图API之本地搜索和范围搜索,具体请看下文。地图服
- 列表列表是Python中最具灵活性的有序集合对象类型。与字符串不同的是,列表可以包含任何类型的对象:数字、字符串甚至其他列表。列表是可变对象
- 最简单的方法:取整后判断是否和原值相等!javascript的取整函数是:parseIntif(parseInt(value)==value
- 微信小程序获取位置信息的方式有两种,一种是调用微信官方的接口来获取,如getLocation,这种方式只能获取经纬度微信官方文档https:
- 损失函数通过torch.nn包实现,1 基本用法criterion = LossCriterion() #构造函数有自己的参数loss =