js 自定义 实现 确认窗口的代码
时间: 2024-03-05 22:50:37 浏览: 25
您可以使用以下JavaScript代码自定义实现确认窗口:
```javascript
function myConfirm(message, callback) {
var confirmDialog = document.createElement("div");
confirmDialog.classList.add("confirm");
var confirmMessage = document.createElement("div");
confirmMessage.classList.add("message");
confirmMessage.textContent = message;
confirmDialog.appendChild(confirmMessage);
var confirmButtons = document.createElement("div");
confirmButtons.classList.add("buttons");
var confirmOK = document.createElement("button");
confirmOK.textContent = "OK";
confirmOK.addEventListener("click", function() {
document.body.removeChild(confirmDialog);
callback(true);
});
confirmButtons.appendChild(confirmOK);
var confirmCancel = document.createElement("button");
confirmCancel.textContent = "Cancel";
confirmCancel.addEventListener("click", function() {
document.body.removeChild(confirmDialog);
callback(false);
});
confirmButtons.appendChild(confirmCancel);
confirmDialog.appendChild(confirmButtons);
document.body.appendChild(confirmDialog);
}
myConfirm("Are you sure you want to delete this item?", function(result) {
if (result) {
// User clicked "OK"
} else {
// User clicked "Cancel"
}
});
```
在上面的示例中,我们定义了一个名为myConfirm的函数,该函数接受两个参数:消息和回调函数。该函数创建一个包含确认消息和两个按钮的自定义对话框,并在单击按钮时调用回调函数。
请注意,此代码只是一个简单的示例,用于演示如何使用JavaScript创建自定义确认窗口。如果您需要更复杂的功能或更好的用户体验,请考虑使用现有的对话框库,如SweetAlert或Bootstrap Modal。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)