前端插件sweetalert

最新推荐文章于 2023-11-09 16:04:57 发布

NightCharm

最新推荐文章于 2023-11-09 16:04:57 发布

阅读量572

点赞数

分类专栏： django 文章标签： web前端 weetalert

本文链接：https://blog.csdn.net/NightCharm/article/details/79859487

版权

django 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一个比较好看的弹窗插件

——收集记录

提示框内容比较好看还有动画。里面function中可以写ajax代码进行前后端交互

这是一个bootstrap的扩展。在github上发现的

只需导入 sweetalert.js 和 sweetalert.css 当然还有bootstrap.css 和 jquery

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">

    <script src="/static/sweetalert.min.js"></script>
    <link rel="stylesheet" href="/static/sweetalert.css">

    <script src="/static/jquery-3.2.1.min.js"></script>

</head>
<body>
    <button class="btn btn-info" id="btn1">点我有惊喜</button>
    <button class="btn btn-info" id="btn2">点我有惊喜</button>
    <button class="btn btn-info" id="btn3">点我有惊喜</button>
    <button class="btn btn-info" id="btn4">点我有惊喜</button>
    <button class="btn btn-info" id="btn5">点我有惊喜</button>
    <button class="btn btn-info" id="btn6">点我有惊喜</button>
    <button class="btn btn-info" id="btn7">点我有惊喜</button>
    <button class="btn btn-info" id="btn8">点我有惊喜</button>

<script>

    $('#btn1').on('click', function () {
        swal("直接弹出内容")
    });

    $('#btn2').on('click', function () {
        swal("这是标题", "这是内容")
    });
    $('#btn3').on('click', function () {
        swal("成功", "带有动画的", "success");
        swal("异常", "带有动画的", "error");
        swal("警告", "带有动画的", "warning")
    });
    $('#btn4').on('click', function () {
        swal({
              title: "这是标题",
              text: "这是内容",
              type: "warning", // success error warning info
              showCancelButton: true,  // 是否有取消按钮
              confirmButtonClass: "btn-danger", // 删除按钮的样式类 bootstrap中的样式
              confirmButtonText: "删除按钮上的文字",
              closeOnConfirm: false // 是否瞬间关闭第二页面
            },
            function(){
              swal("删除后的标题", "这里是内容", "success");
            });
    });
    $('#btn5').on('click', function () {
        swal({
          title: "这是标题",
          text: "这是内容",
          type: "warning", // success error warning info
          showCancelButton: true, // 是否有取消按钮
          confirmButtonClass: "btn-info", // 删除按钮的样式类 bootstrap中的样式
          confirmButtonText: "删除按钮上的文字",
          cancelButtonText: "取消按钮上的文字",
          closeOnConfirm: false,  // 是否瞬间关闭第二页面
          closeOnCancel: false  // 是否瞬间关闭第二页面
        },
        function(isConfirm) {
          if (isConfirm) {
            swal("删除后的显示标题", "删除后的显示内容", "success");
          } else {
            swal("取消后的显示标题", "取消后的显示内容", "error");
          }
        });
    });
    $('#btn6').on('click', function () {
        swal({
          title: "这是一个可爱的标题",
          text: "这是一个顽皮的内容",
          imageUrl: 'thumbs-up.jpg' // 自定义图片
        });
    });
    $('#btn7').on('click', function () {
        swal({
          title: "这是一个标题",
          text: "这是一个提示内容",
          type: "input",
          showCancelButton: true, // 是否显示取消按钮
          closeOnConfirm: false,  // 是否瞬间关闭
          inputPlaceholder: "这是一个提示框的提示内容"
        }, function (inputValue) {
          if (inputValue === false) return false;
          if (inputValue === "") {
            swal.showInputError("如果输入框是空的警告内容");
            return false
          }
          swal("出入后的标题", "后面是你输入的内容 " + inputValue, "success");
        });
    });
    $('#btn8').on('click', function () {
        swal({
          title: "这是一个标题",
          text: "这是一个内容",
          type: "info",
          showCancelButton: true,
          closeOnConfirm: false,
          showLoaderOnConfirm: true  // 是否显示等待提示
        }, function () {
            // 在这里写逻辑代码
          setTimeout(function () {
            swal("Ajax request finished!");
          }, 2000);
        });
    });

</script>
</body>
</html>

类似于后台界面中的按钮就可以使用这个进行替换了就像第一句一样 function中改成ajax 提交，在success:function(){}的最后加上模板中的提示代码就可以了

NightCharm

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端插件sweetalert

一个比较好看的弹窗插件——收集记录提示框内容比较好看还有动画。里面function中可以写ajax代码进行前后端交互这是一个bootstrap的扩展。在github上发现的只需导入 sweetalert.js 和 sweetalert.css 当然还有bootstrap.css 和 jquery&lt;!DOCTYPE html&gt;&lt;html lang="...
复制链接

扫一扫

专栏目录