layer和sweetalert2消息提醒js插件简单使用

复制代码
<!DOCTYPE html>
<html lang="en" backgound="">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="../public/plugins/bootstrap-5.1.3/css/bootstrap.min.css" rel="stylesheet" />
    <link href="../public/plugins/bootstrap-icons-1.9.1/bootstrap-icons.css" rel="stylesheet" />
    <link href="./css/index.css" rel="stylesheet" />
  </head>
  <body class="bg-light">
    <div class="container-fluid">
      <!-- content ------------------------------------- -->
      <div id="test" class="card mt-5">
        <div class="card-header">
          <button type="button" class="btn btn-primary" onclick="swal2.showModal()">sweetalert2 modal</button>
          <button type="button" class="btn btn-primary" onclick="swal2.confirmMsg()">sweetalert2 confirm msg</button>
          <button type="button" class="btn btn-primary" onclick="swal2.msg()">sweetalert2 msg</button>
          <button type="button" class="btn btn-primary" onclick="swal2.successMsg()">sweetalert2 success msg</button>
          <button type="button" class="btn btn-primary" onclick="swal2.errorMsg()">sweetalert2 error msg</button>
          <button type="button" class="btn btn-primary" onclick="swal2.successMsg1()">sweetalert2 success msg</button>
          <button type="button" class="btn btn-primary" onclick="swal2.errorMsg1()">sweetalert2 error msg</button>
        </div>

        <div class="card-header">
          <button type="button" class="btn btn-primary" onclick="layer3.showModal()">layer modal</button>
          <button type="button" class="btn btn-primary" onclick="layer3.confirmMsg()">layer confirm msg</button>
          <button type="button" class="btn btn-primary" onclick="layer3.msg()">layer msg</button>
          <button type="button" class="btn btn-primary" onclick="layer3.successMsg()">layer success msg</button>
          <button type="button" class="btn btn-primary" onclick="layer3.errorMsg()">layer error msg</button>
          <button type="button" class="btn btn-primary" onclick="layer3.loading()">layer loading</button>
          <button type="button" class="btn btn-primary" onclick="layer3.fullScreen()">layer fullScreen</button>
        </div>

        <div class="card-body">
          <table class="table table-bordered mt-2">
            <thead>
              <tr class="text-center">
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>
                  <!-- <a herf="#" title="detail" class="detail ms-2" data-sid="1"><i class="bi bi-archive-fill"></i></a> -->
                  <a herf="#" title="delete" class="delete ms-2"><i class="bi bi-trash3-fill"></i></a>
                </td>
              </tr>
              <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>
                  <!-- <a herf="#" title="detail" class="detail ms-2" data-sid="1"><i class="bi bi-archive-fill"></i></a> -->
                  <a herf="#" title="delete" class="delete ms-2"><i class="bi bi-trash3-fill"></i></a>
                </td>
              </tr>
              <tr>
                <th scope="row">3</th>
                <td>Larry the Bird</td>
                <td></td>
                <td>
                  <!-- <a herf="#" title="detail" class="detail ms-2" data-sid="1"><i class="bi bi-archive-fill"></i></a> -->
                  <a herf="#" title="delete" class="delete ms-2"><i class="bi bi-trash3-fill"></i></a>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <div id="createForm" style="display: none" class="p-4">
      <form>
        <div class="input-group mb-3">
          <span class="input-group-text" id="basic-addon1">name</span>
          <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1" />
        </div>
        <div class="input-group mb-3">
          <span class="input-group-text" id="basic-addon2">email</span>
          <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2" />
        </div>
        <div class="input-group mb-3">
          <span class="input-group-text" id="basic-addon3">address</span>
          <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3" />
        </div>
        <div class="input-group mb-3">
          <span class="input-group-text">date</span>
          <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)" />
        </div>
        <div class="input-group">
          <span class="input-group-text">With textarea</span>
          <textarea class="form-control" aria-label="With textarea"></textarea>
        </div>
      </form>
    </div>
  </body>
  <script src="../public/plugins/bootstrap-5.1.3/js/bootstrap.bundle.js"></script>
  <script src="../public/plugins/jquery-1.9.1.js"></script>
  <script src="../public/plugins/layer-v3.5.1/layer.js"></script>
  <script src="../public/plugins/sweetalert2.all.min.js"></script>
  <script>
    const swal2 = {
      showModal: function () {
        Swal.fire({
          html: $("#createForm").html(),
          width: "95%",
          backdrop: false,
          showCloseButton: false,
          showConfirmButton: true,
          showCancelButton: true,
          focusConfirm: true,
          confirmButtonText: "Save",
          confirmButtonColor: "#6989bf",
          cancelButtonColor: "#6989bf",
        }).then((result) => {
          if (result.isConfirmed) {
            handleSave();
            Swal.fire("Saved!", "", "success");
          } else if (result.isDenied) {
            Swal.fire("Changes are not saved", "", "info");
          }
        });
      },
      confirmMsg: function () {
        Swal.fire({
          title: "Are you sure?",
          text: "You won't be able to revert this!",
          showCancelButton: true,
          confirmButtonColor: "#3085d6",
          cancelButtonColor: "#d33",
          confirmButtonText: "Yes, delete it!",
        }).then((result) => {
          if (result.isConfirmed) {
            Swal.fire("Deleted!", "Your file has been deleted.", "success");
          }
        });
      },
      msg: function () {
        Swal.fire({
          position: "center",
          title: "msg",
          showConfirmButton: false,
          timer: 2000,
        });
      },
      successMsg: function () {
        Swal.fire({
          position: "center",
          icon: "success",
          title: "Your work has been saved",
          showConfirmButton: false,
          timer: 2000,
        });
      },
      errorMsg: function () {
        Swal.fire({
          position: "center",
          icon: "error",
          title: "error",
          showConfirmButton: false,
          timer: 2000,
        });
      },
      successMsg1: function () {
        const Toast = Swal.mixin({
          toast: true,
          position: "top-end",
          showConfirmButton: false,
          timer: 3000,
          timerProgressBar: true,
          didOpen: (toast) => {
            toast.addEventListener("mouseenter", Swal.stopTimer);
            toast.addEventListener("mouseleave", Swal.resumeTimer);
          },
        });

        Toast.fire({
          icon: "success",
          title: "Signed in successfully",
        });
      },
      errorMsg1: function () {
        const Toast = Swal.mixin({
          toast: true,
          position: "top-end",
          showConfirmButton: false,
          timer: 3000,
          timerProgressBar: true,
          didOpen: (toast) => {
            toast.addEventListener("mouseenter", Swal.stopTimer);
            toast.addEventListener("mouseleave", Swal.resumeTimer);
          },
        });

        Toast.fire({
          icon: "error",
          title: "error",
        });
      },
    };
  </script>

  <script>
    const layer3 = {
      showModal: function () {
        layer.open({
          type: 1,
          shade: false,
          area: ["90%", "600px"], //宽高
          btn: ["save"], //按钮
          content: $("#createForm"),
          success: function () {
            layer.msg("opened", { icon: 1 });
          },
          yes: function () {
            layer.msg("saved", { icon: 1 });
          },
        });
      },
      confirmMsg: function () {
        layer.confirm(
          "are you sure?",
          {
            icon: 3,
          },
          function () {
            layer.msg("great", { time: 2000, icon: 1 });
          },
          function () {
            layer.msg("sorry", {
              time: 2000,
              icon: 2,
            });
          }
        );
      },
      loading: function () {
        layer.load(1);
        setTimeout(function () {
          layer.closeAll("loading");
        }, 3000);
      },
      msg: function () {
        layer.msg("hello");
      },
      successMsg: function () {
        layer.alert("正确", { time: 2000, icon: 1 });
      },
      errorMsg: function () {
        layer.alert("错误", { time: 2000, icon: 2 });
      },
      fullScreen: function () {
        var index = layer.open({
          type: 1,
          content: $("#createForm"),
          area: ["320px", "195px"],
          maxmin: true,
        });
        layer.full(index);
      },
    };
  </script>
</html>
复制代码

 

posted @   carol2014  阅读(92)  评论(0)  编辑  收藏  举报
相关博文：
· js弹窗组件sweetalert2使用
· vue3使用sweetalert2替代默认的alert/confirm框
· sweetalert2的基本用法
· JS插件补充
· 【16.0】JS确认插件补充
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示