swal弹窗示例

最新推荐文章于 2024-08-17 21:48:20 发布

qq_35392981

最新推荐文章于 2024-08-17 21:48:20 发布

阅读量1.3w

点赞数 2

分类专栏：前端网页弹窗 swal 文章标签： swal HTML漂亮弹窗

本文链接：https://blog.csdn.net/qq_35392981/article/details/84975014

版权

前端同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

网页弹窗

1 篇文章 0 订阅

订阅专栏

swal

1 篇文章 0 订阅

订阅专栏

以下代码网页中打开即可调试

<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"  />
    <title>测试页面</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css" />
    <script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js"></script>
    <script>/*详解：https://sweetalert.js.org/*/</script>
  </head>
  
  <body>
    <div style="margin: 50px; text-align: center;">
      <input id="alertNoCallBack" type="button" value="提示" />
    </div>
    <div style="margin: 50px; text-align: center;">
      <input id="alertCallBack" type="button" value="提示!" />
    </div>
    <div style="margin: 50px; text-align: center;">
      <input id="confirm" type="button" value="确认" />
    </div>
    <script>
      /*type: {'success', 'warning', 'error','loading'}*/
      function showConfirm(type,info,action,showCancelButton,showConfirmButton){
        swal({
          title: "消息提示",
          text: info,
          type: type,
          showCancelButton: showCancelButton,
          cancelButtonText:"取消",
          cancelButtonColor:"#B9B9B9",
          showConfirmButton: showConfirmButton,
          confirmButtonColor: "#DD6B55",
          confirmButtonText: "确认",
          closeOnConfirm:true,
          closeOnCancel:true
        },action);
      };
    </script>
    
    <script>
      function alertNoCallBack(){
        swal("提示","解除失败！","error");
      }
    </script>
    
    <script>
      function alertCallBack(){
        showConfirm("info","喵喵叫！",function(){alert("回调函数！");},false,true)
      }
    </script>

    <script>
      function confirm(){
        showConfirm("success","执行成功！",function(){alert("回调函数！");},true,true)
      }
    </script>
    <script>
      $(function(){
        $("#alertNoCallBack").click(function(){alertNoCallBack();});
        $("#alertCallBack").click(function(){alertCallBack();});
        $("#confirm").click(function(){confirm();});
      });
    </script>
  </body>
</html>