jqueryConfirm使用教程

文章参考自:链接

1. 引入css、js库,两种方式

        1)下载:jquery-confirm.min.css、jquery-confirm.min.js,放到/static/css、/static/js文件夹,然后.html中引入(我是用的thymeleaf模板引擎):
        <link rel="stylesheet" type="text/css" th:href="@{/css/jquery-confirm.min.css}"></link>
        <script th:src="@{/js/jquery-confirm.min.js}"></script>

        2)直接在线引用CDN服务:
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css"></link>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js"></script>

2. 使用

1)定义一个按钮,指定id,点击按钮弹出alert弹窗:

<body>
        <button id="go">提交</button>
</body>

2)绑定按钮事件,click弹出:

<script>
        $(function(){
            $("#go").bind("click",function(){
                $.alert(
                    {
                        title : "提示信息",
                        content: "你点击了提交按钮"
                    }
                );
            })
        });
</script>

3. jquery-confirm常用函数

  • $.alert
  • $.confirm
  • $.dialog
  • $.fn.confirm

推荐阅读更多精彩内容

  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,200评论 1 19
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,142评论 0 2
  • 此时的宿舍很安静,大家各忙各的,大家各怀心事,只有一张床上蒙头躺着一个人,时不时地还传来低微的抽泣声,此时的...
    风起飞舞的日子阅读 192评论 0 0
  • 高二文理分班后,少了部分文科的优势,总成绩排名开始掉的厉害,根据学习互补的方针张老头安排他当我同桌。他脾气很好,我...
    d8ff15d07d8d阅读 330评论 0 3
  • 要一碗馄饨,馄饨出锅,冒着腾腾的热气。在餐桌的旁边,是一碗切好的香菜。香菜孤零零的在桌子的一角。因为长时间的放置...
    石上草阅读 289评论 2 0