使用 muiconfirm 提示框一个按钮是功能 是 删除该消息一个清空所有消息 两个按钮 点击其他任何地方两个都不执行关闭确认框
以下是使用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对象,给它们添加了点击事件,阻止了冒泡。这样,当用户点击这两个按钮时,不会触发关闭提示框的事件。
同时,我们也添加了一个点击事件,当用户点击其他任何地方时,提示框会被关闭。这样,用户就可以在不想执行任何操作时,随时关闭提示框。
原文地址: https://www.cveoy.top/t/topic/b5Ol 著作权归作者所有。请勿转载和采集!