以下是使用mui.confirm实现提示框的示例代码:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>提示框示例</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/mui/3.7.1/css/mui.min.css">
  <script src="https://cdn.bootcdn.net/ajax/libs/mui/3.7.1/js/mui.min.js"></script>
</head>

<body>
  <button id="show-confirm">显示提示框</button>
  <script>
    var confirmDialog = null;
    var deleteBtn = null;
    var clearBtn = null;

    mui.init();

    mui("body").on("tap", "#show-confirm", function () {
      if (!confirmDialog) {
        confirmDialog = mui.confirm("确定要删除该消息吗?", "提示", ["取消", "确定"], function (e) {
          if (e.index == 1) {
            // 点击确定按钮,执行删除操作
            console.log("执行删除操作");
          }
        });
        // 获取两个按钮的DOM对象
        deleteBtn = confirmDialog.querySelector(".mui-popup-button-bold");
        clearBtn = confirmDialog.querySelector(".mui-popup-button-default");
        // 给两个按钮添加点击事件,阻止冒泡
        mui(deleteBtn).on("tap", function (e) {
          e.stopPropagation();
        });
        mui(clearBtn).on("tap", function (e) {
          e.stopPropagation();
        });
      } else {
        // 显示已有的提示框
        mui.confirm("", "提示", ["取消", "确定"], function (e) {
          if (e.index == 1) {
            // 点击确定按钮,执行删除操作
            console.log("执行删除操作");
          }
        });
      }
    });

    // 点击其他任何地方,关闭提示框
    mui("body").on("tap", function () {
      if (confirmDialog) {
        confirmDialog.style.display = "none";
      }
    });
  </script>
</body>

</html>

在上述代码中,我们首先创建了一个按钮,点击该按钮可以显示提示框。在点击按钮的回调函数中,我们使用mui.confirm方法创建了一个提示框,其中包含了两个按钮:一个删除该消息的按钮,一个清空所有消息的按钮。我们通过获取这两个按钮的DOM对象,给它们添加了点击事件,阻止了冒泡。这样,当用户点击这两个按钮时,不会触发关闭提示框的事件。

同时,我们也添加了一个点击事件,当用户点击其他任何地方时,提示框会被关闭。这样,用户就可以在不想执行任何操作时,随时关闭提示框。

使用 muiconfirm 提示框一个按钮是功能 是 删除该消息一个清空所有消息 两个按钮 点击其他任何地方两个都不执行关闭确认框

原文地址: https://www.cveoy.top/t/topic/b5Ol 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录