甜蜜警报语法

时间:2015-10-07 07:37:35

标签: javascript syntax sweetalert

我没有得到甜蜜的警报,我认为它与语法有关。有人能告诉我我应该做什么

<!DOCTYPE html>
<html>
 <head>
  <title>Testing</title>
  <script src="dist/sweetalert.min.js"></script>
  <link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
 </head>
<body>
<script>
   swal({
     title: 'Confirm',
     text: 'Are you sure to delete this message?',
     type: 'warning',
     showCancelButton: true,
     confirmButtonText: 'Yes, sir',
     cancelButtonText: 'Not at all'
 });
</script>
</body>
</html>

2 个答案:

答案 0 :(得分:3)

在html中添加一个按钮并触发onclick事件。

e.g。使用标准查询选择器

document.querySelector('button#test-1').onclick = function(){
  swal({
    title: 'Confirm',
    text: 'Are you sure to delete this message?',
    type: 'warning',
    showCancelButton: true,
    confirmButtonText: 'Yes, sir',
    cancelButtonText: 'Not at all'
  });
};
<link href="http://t4t5.github.io/sweetalert/dist/sweetalert.css" rel="stylesheet"/>
<script src="http://t4t5.github.io/sweetalert/dist/sweetalert.min.js"></script>
<button id="test-1">Show alert</button>

答案 1 :(得分:0)

只需按照以下步骤更改代码:

<!DOCTYPE html>
<html>
    <head>
        <title>Testing</title>

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.css">
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.js"></script>

        <script>
            $(document).ready(function(){

                    Swal.fire({
                        title: 'Success',
                        text: "Your sweet alert successfully worked",
                        type: 'success',
                    });

                });
        </script>

    </head>
    <body>

    </body>
</html>