jquery-confirm 弹框插件

每次做项目需要用到弹框,访问confirm官网又比较慢到处查资料说的也不是很明了所以今天 在这里总结下自己经常需要用到的配置弹框参数免得需要用得时候花费太多的时间去查资料 在这里不多说了 直接入题:

在此附上gitthub链接 每次访问都需要半天 而且上面 示例不能查看效果需要我们自己下载下来放到本地调试
http://craftpip.github.io/jquery-confirm/

这里写图片描述

$.confirm({
    title: 'Confirm!', //弹框标题
    content: 'Simple confirm!', //中间部分内容
    confirm: function(){  //点击确定之后,回调函数
        $.alert('Confirmed!');
    },
    cancel: function(){ //点击取消之后,回调函数
        $.alert('Canceled!')
    }
});

下面配图 以供参考
这里在官网截个图作参考

一、confirm弹框如果是点击弹框以外的地方(默认是隐藏),弹框也会随之隐藏要是在弹框后面有程序需要执行 就需要用户点击确定或者取消 所以不让它消失配置如下

backgroundDismiss: false,//设置点击弹框以外地方,不隐藏

二、下面则是设置 键盘上面的按钮来触发确定、取消 等操作

keyboardEnabled: true,//设置 enter键触发确定按钮
confirmKeys: [65], // 此键值  代表键盘上的A 触发确定
cancelKeys: [66],// 此键值  代表键盘上的B  触发取消

三、配置时间自动触发 确定、取消

autoClose: 'cancel|6000', //六秒自动触发取消
autoClose: 'confirm|10000',//十秒自动触发确定按钮
好的,我可以为你提供一个示例代码,使用 jquery-confirm 插件实现弹出框缩小后出现在右侧边缘,恢复后出现在中间区域。 首先,你需要引入 jquery-confirm 插件jQuery 库。然后,使用以下代码创建一个弹出框: ```html <div id="my-confirm" class="my-confirm"> <h4>提示</h4> <p>这是一个弹出框</p> </div> ``` 接下来,你可以使用以下 JavaScript 代码初始化 jquery-confirm 插件,并设置弹出框缩小和恢复的回调函数: ```javascript $(document).ready(function() { // 初始化 jquery-confirm 插件 $.confirm({ title: '', content: $('#my-confirm'), columnClass: 'medium', draggable: true, dragWindowGap: 0, onContentReady: function() { var self = this; this.$content.find('.btn-minimize').click(function() { // 缩小弹出框 self.$content.parent().removeClass('medium').addClass('small'); self.$content.parent().css({ top: $(window).height() - self.$content.parent().outerHeight() - 50, left: $(window).width() - self.$content.parent().outerWidth() - 50 }); }); this.$content.find('.btn-maximize').click(function() { // 恢复弹出框 self.$content.parent().removeClass('small').addClass('medium'); self.$content.parent().css({ top: ($(window).height() - self.$content.parent().outerHeight()) / 2, left: ($(window).width() - self.$content.parent().outerWidth()) / 2 }); }); } }); }); ``` 在这个示例中,我们首先初始化了 jquery-confirm 插件,并使用 content 属性指定了弹出框的内容。然后设置 draggable 属性为 true,允许用户拖动弹出框。同时设置 dragWindowGap 属性为 0,使弹出框拖动时与鼠标指针对齐。 接着,我们在 onContentReady 回调函数中获取弹出框的按钮元素,并为按钮元素绑定了 click 事件。在缩小按钮的 click 事件中,我们使用 jQuery 的 css() 方法设置了弹出框的位置,使其出现在右侧边缘。在恢复按钮的 click 事件中,我们同样使用 css() 方法设置了弹出框的位置,使其出现在中间区域。 最后,我们在 HTML 中为弹出框添加了两个按钮,分别是缩小和恢复按钮: ```html <button class="btn-minimize">缩小</button> <button class="btn-maximize">恢复</button> ``` 希望这个示例代码能够帮助你实现弹出框缩小后出现在右侧边缘,恢复后出现在中间区域的效果。如果还有其他问题,欢迎继续提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值