jquery jquery-confirm的使用

最新推荐文章于 2024-08-10 07:55:27 发布

原创最新推荐文章于 2024-08-10 07:55:27 发布 · 2.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#confirm

js 专栏收录该内容

22 篇文章

订阅专栏

本文档展示了如何使用jQuery Confirm插件创建一个确认对话框。该对话框会在按钮被点击时出现，询问用户是否确定进行可能导致IT行业科技革命的操作，并提供确定或取消两个选项。

<!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>