javascript 如何在 SweetAlert 弹出窗口中添加关闭按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46447402/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add close button in SweetAlert pop up
提问by Abdul Manaf
I have used the SweetAlert library for displaying a pop up in my application. This is my code
我使用 SweetAlert 库在我的应用程序中显示一个弹出窗口。这是我的代码
swal({
title: "Are you sure?",
text: "Test message?",
type: "info",
showCancelButton: true,
focusConfirm: false,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes",
cancelButtonText: "No"
}, function (isConfirm) {})
I need to add a close button in top right corner. Based on documentation, the close button available only for the SweetAlert2 library.
我需要在右上角添加一个关闭按钮。根据文档，关闭按钮仅适用于 SweetAlert2 库。
Is it possible to add close button in the SweetAlert1 library?
是否可以在 SweetAlert1 库中添加关闭按钮？
回答by Andrew Heinke
swal({
title: "Are you sure?",
text: "Test message?",
type: "info",
showCancelButton: true,
focusConfirm: false,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes",
cancelButtonText: "No",
showCloseButton: true,
Just add showCloseButton: trueand this will show the close X icon in the top right corner of the pop up.
只需添加showCloseButton: true，这将在弹出窗口的右上角显示关闭 X 图标。
Source: See the "Custom HTML description and buttons with ARIA labels" example on SweetAlerts2 Docs
来源：请参阅SweetAlerts2 Docs上的“自定义 HTML 描述和带有 ARIA 标签的按钮”示例
Note it is not available in SweetAlert1 library which is now deprecated, I would suggest using SweetAlert2.
请注意，它在现已弃用的 SweetAlert1 库中不可用，我建议使用 SweetAlert2。
回答by aaron
You can define a mySwalwrapper that checks for a showCloseButtonparam.
您可以定义一个mySwal检查showCloseButton参数的包装器。
Here's an example for v2.1.0 of the original SweetAlert library:
这是原始 SweetAlert 库 v2.1.0 的示例：
mySwal = function() {
swal(arguments[0]);
if (arguments[0].showCloseButton) {
closeButton = document.createElement('button');
closeButton.className = 'swal2-close';
closeButton.onclick = function() { swal.close(); };
closeButton.textContent = '×';
modal = document.querySelector('.swal-modal');
modal.appendChild(closeButton);
}
}
mySwal({
title: "Are you sure?",
text: "Test message?",
icon: "info", /* type: "info", */
buttons: [
"No", /* showCancelButton: true, cancelButtonText: "No", */
"Yes" /* confirmButtonText: "Yes", */
],
focusConfirm: false,
showCloseButton: true
});.swal-button--confirm {
background-color: #dd6b55; /* confirmButtonColor: "#DD6B55", */
}
.swal-modal .swal2-close {
position: absolute;
top: 0;
right: 0;
width: 1.2em;
height: 1.2em;
transition: color 0.1s ease-out;
border: none;
background: transparent;
color: #cccccc;
font-family: serif;
font-size: 40px;
cursor: pointer;
}
.swal-modal .swal2-close:hover {
color: #f27474;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.0/sweetalert.min.js"></script>