MUI confirm 提示框 - 自定义按钮行为和关闭方式 - 常规

以下是使用 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 对象，并为它们添加点击事件，并阻止事件冒泡，可以确保点击这些按钮不会触发关闭提示框的行为。

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