jquery-confirm 消息弹出框插件的使用

最新推荐文章于 2022-10-31 19:06:39 发布

暗恋花香

最新推荐文章于 2022-10-31 19:06:39 发布

阅读量1.5k

点赞数

分类专栏： # JavaScript/jQuery 文章标签： jquery-confirm

本文链接：https://blog.csdn.net/qq_42324086/article/details/100010770

版权

JavaScript/jQuery 专栏收录该内容

17 篇文章 4 订阅

订阅专栏

1.下载

官方地址及插件下载

2.引入

 <link href="https://cdn.bootcss.com/jquery-confirm/3.3.4/jquery-confirm.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/jquery-confirm/3.2.3/jquery-confirm.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-confirm/3.3.4/jquery-confirm.min.js"></script>

3.使用

你可以通过js事件去触发

简单文本的消息提示框：

$.alert('你点击了确认!');

自定义样式使用

  $('#alert').click(function () {
            $.alert({
                title: '提示',//标题
                content: '你好啊',//提示的内容
                icon: 'fa fa-comment',//标题前的图标样式和font-awesome一起使用
                autoClose: 'cancel|5000', /*自动关闭    属性值为： 执行事件|延迟执行时间*/
                type: 'dark',//对话框类型 orange，dark，green，red
                buttons: {//按钮
                    confirm: {
                        text: '确认',//按钮的文本内容
                        btnClass: 'btn-primary',//按钮的class样式
                        action: function () {//单击按钮后的执行函数
                            //$.alert   添加一个按钮（好吧）如果没有指定按钮，这可以让用户关闭模态。
                            // $.alert('你点击了确认!');

                            //$.confirm  如果没有指定按钮，将添加两个按钮（Okay＆cancel）。
                            //$.confirm('你点击了确认!');

                            //$.dialog    删除按钮并显式显示closeIcon（×）
                            $.dialog({
                                title: 'Text content!',
                                content: 'Simple modal!',
                            });

                            /*  $.fn.confirm 这可以直接绑定到元素 
                             如果没有定义按钮，将添加默认按钮（okay和cancel），
                             okay的默认操作将是重定向给定的href。使用 此。$ target 来获取被点击的元素。 */

                        }
                    },
                    cancel: {
                        text: '取消',
                        action: function () {
                            $.alert('你点击了取消!');
                        }
                    }
                }
            });
        });

4.示例（可以直接执行）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="https://cdn.bootcss.com/jquery-confirm/3.3.4/jquery-confirm.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/jquery-confirm/3.2.3/jquery-confirm.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-confirm/3.3.4/jquery-confirm.min.js"></script>

</head>

<body>

    <button id="alert">提示框</button>
    <a class="twitter" data-title="Goto csdn?" href="https://me.csdn.net/qq_42324086">Goto csdn</a>
    <script>

        /*  $.fn.confirm 这可以直接绑定到元素 
             如果没有定义按钮，将添加默认按钮（okay和cancel），
             okay的默认操作将是重定向给定的href。使用 此。$ target 来获取被点击的元素。 */
        $('a.twitter').confirm({
            content: "...",
        });
        $('a.twitter').confirm({
            buttons: {
                hey: function () {
                    location.href = this.$target.attr('href');
                }
            }
        });

        $('#alert').click(function () {
            $.alert({
                title: '提示',//标题
                content: '你好啊',//提示的内容
                icon: 'fa fa-comment',//标题前的图标样式和font-awesome一起使用
                autoClose: 'cancel|5000', /*自动关闭    属性值为： 执行事件|延迟执行时间*/
                type: 'dark',//对话框类型 orange，dark，green，red
                buttons: {//按钮
                    confirm: {
                        text: '确认',//按钮的文本内容
                        btnClass: 'btn-primary',//按钮的class样式
                        action: function () {//单击按钮后的执行函数
                            //$.alert   添加一个按钮（好吧）如果没有指定按钮，这可以让用户关闭模态。
                            // $.alert('你点击了确认!');

                            //$.confirm  如果没有指定按钮，将添加两个按钮（Okay＆cancel）。
                            //$.confirm('你点击了确认!');

                            //$.dialog    删除按钮并显式显示closeIcon（×）
                            $.dialog({
                                title: 'Text content!',
                                content: 'Simple modal!',
                            });

                            /*  $.fn.confirm 这可以直接绑定到元素 
                             如果没有定义按钮，将添加默认按钮（okay和cancel），
                             okay的默认操作将是重定向给定的href。使用 此。$ target 来获取被点击的元素。 */

                        }
                    },
                    cancel: {
                        text: '取消',
                        action: function () {
                            $.alert('你点击了取消!');
                        }
                    }
                }
            });
        });

    </script>
</body>

</html>

5.示例下载

https://download.csdn.net/download/qq_42324086/11592733

暗恋花香

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
jquery-confirm 消息弹出框插件的使用

1.下载官方地址及插件下载2.引入 <link href="https://cdn.bootcss.com/jquery-confirm/3.3.4/jquery-confirm.min.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font...
复制链接

扫一扫