jquery jquery-confirm的使用

最新推荐文章于 2022-10-31 19:06:39 发布
最新推荐文章于 2022-10-31 19:06:39 发布
阅读量2k 收藏 4
点赞数
分类专栏： js 文章标签： confirm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pyp_demon/article/details/111559664
版权 
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
  <script src='./jquery-3.4.1.min.js'></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
  <meta charset="utf-8" />
</head>

<body>

  <button class="btn">点击</button>

</body>

<script>

  $(function() {

    $("button.btn").click(function(){

      $.confirm({
        title: '你确定要做这个事情吗',
        content: '你做的事情可能造成IT行业的科技革命',
        buttons: {
          ok: {
            text: '确定',
            btnClass: 'btn-primary',
            action: function() {
              console.log('同意')
            }
          },
          cancel: {
            text: '取消',
            brnClass: 'btn-primary',
            action: function() {
              console.log('取消')
            }
          }
        }
      })

    })


  })
</script>

</html>
朲間烝茷
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jQuery 确认提示框（Confirm）
05-07
内容索引:脚本资源,jQuery,提示框,Confirm　　jQuery Confirm确认提示框，不能拖动哦，代替Javascript的Confirm确认提示框，更符合WEB体验标准，比较简洁，自带示例，点击"YES"或“NO”后指向的网址是不一样的。
JQuery Confirm确认框
热门推荐
道问苍天的博客
02-06 7万+
1.Confirm确认框简介：  JS自带的alert弹出框过于简陋，往往无法满足实际应用需求，为更好地实现弹窗提示功能，JQuery提供了相关的确认框组件。           源码：https://github.com/craftpip/jquery-confirm  在线DEMO：http://www.jq22.com/demo/jqueryConfirm20160413/
jQuery模态弹窗插件(jquery-confirm)
MingDaw的专栏
10-31 1万+
jquery-confirm组件包含两个资源文件，分别为：样式文件jquery-confirm.min.css和脚本文件jquery-confirm.min.js。jquery-confirm官网地址：https://craftpip.github.io/jquery-confirm/注：jquery-confirm依赖于jQuery，如果你还需要响应式布局，则还依赖Bootstrap。如果你的前端项目中还在使用jQuery，那么jquery-confirm是你模态弹窗的完美选择。
jquery confirm使用
日积月累一点点
01-08 3191
1、下载引用jquery-confirm.min.css和jquery-confirm.min.js， 点击这里下载； 2、 使用confirm $.confirm({ title: '标题', content: '弹框内容？', buttons: { 确认: { #按钮名称 action: function (r) { #...
手把手教你--Jquery-Confirm弹出框插件(功能强大的弹出框)
小流至江河的博客
08-23 7971
这是第二篇关于弹出框插件的使用，前一篇文章说的是用smoke.js插件做出的弹出框(ps:传送门:手把手教你--html、js弹出框插件smoke.js(简单实用弹出框),赠送优化后主题(css))，效果如下： smoke.alert("我是smoke.alert()",//第一个参数提示内容 function(){},//第二个参数回调函数 {ok: "确定"});//第三个参数按钮的属性 ...
jquery-confirm设置按钮显示中文
郭小郭的专栏
07-04 1万+
jquery-confirm 是一个功能强大的jQuery对话框和确认框插件，使用起来非常的简单，我在使用的时候也遇到了一些问题，如何将按钮设置中文呢？查阅文档才知道，原来是通过下面的方式。 效果如下： 代码如下：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title
jquery-confirm 消息弹出框插件
赖胖子的博客
01-15 1008
官方地址及插件下载写H5页面，有几个按钮点击需跳出一张长图，占全屏，用scroll属性写出来pc鼠标滚轮可向下浏览，移动端点击无效。改用jquery-confirm插件，该插件包含各种弹框，比较灵活。根据我的需求，这样写$.alert({ title:false, ...
Toastmessage 的使用
技术宝库
11-12 2748
一：jquery.toastmessage.js 概述toastmessage.js 是jQuery插件提供的消息通知提示框。有着较好的用户体验，它有四种不同的消息类型：notice(通知) success(成功) warning(警告)error(错误)。 具体说明参考官方文档：https://github.com/akquinet/jquery-toastmessage-plugin/wiki
jquery插件jquery.confirm弹出确认消息
菜鸟笔记
12-28 1万+
本文为大家介绍了插件jquery.confirm弹出确认消息的实现方法，具有一定的参考价值，特分享给大家供大家参考，具体内容如下 实现效果： 具体代码： 1、插件默认参数 // 默认参数 $.confirm.defaults = { // 样式 css: "http://static.qianduanblog.com/css/jquery.confirm/d
jquery-confirm.rar
08-22
jquery-confirm 消息弹出框插件的使用，有详细的注释，可以直接使用
JQ.jquery-confirm | 功能强大的jQuery对话框和确认取消框插件
06-12
JQ.jquery-confirm | 功能强大的jQuery对话框和确认取消框插件
jquery-confirm.js和jquery-form.js
03-21
form表单提交验证调转,jquery-confirm插件，弹出提醒框................
Jquery-alert-confirm.zip
07-04
对应我的博客中的对应的资源 ，可以详细的展示出PC端的有关jquery 的alert，confirm等弹框的应用与展示
jquery-confirm
08-21
jquery-confrim是一个jquery的插件，里面有各种弹出框效果
jquery.confirm:jQuery 确认插件
07-07
用于简单确认的 jQuery 插件用于简单本地确认的 jQuery 插件安装使用安装 bower install jquery.confirm用法 < button id =" btn1 " > Confirm #1 (Default message) </ button > $ ( '#btn1' ) . ...
node.js 中获取当前时间戳——毫秒级/秒级
pyp_demon的博客
10-14 7591
毫秒级时间戳 Date.now(); 秒级时间戳 Math.floor(Date.now() / 1000);
js Object.freeze(obj)冻结一个对象或者一个数组，使其不能发生变化
pyp_demon的博客
02-27 2513
冻结一个对象或者一个数组,冻结的是对象本身 冻结后的对象或者数组不能被修改 不能添加新的属性 不能删除已有属性 不能修改已有属性的值 返回值是被冻结的对象本身，与被冻结的源对象完全一致，也被冻结 let obj = { "name": "张三", "age": 18, "sex": '男' } let _obj = Object.freeze(obj) console.log(_obj) // 返回值是..
js 配合正则将字符串中多个字符串替换为指定的字符串
pyp_demon的博客
11-24 1807
// 以下是将S\D\H全部替换为PYP let str = 'ANSDSOFSDHFFJKSDBLSD'; str = str.replace(/A/D/H/g, 'PYP'); // 注：如果在末尾不加上 g 的话，只能替换第一个，并且只能替换一次
使用jquery-confirm插件写一段代码，实现弹出框缩小后出现在右侧边缘，恢复后出现在中间区域
最新发布
06-09
好的，我可以为你提供一个示例代码，使用 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> ``` 希望这个示例代码能够帮助你实现弹出框缩小后出现在右侧边缘，恢复后出现在中间区域的效果。如果还有其他问题，欢迎继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值