[英]How to add close button in SweetAlert pop up
我使用SweetAlert库在我的应用程序中显示弹出窗口。 这是我的代码
swal({
title: "Are you sure?",
text: "Test message?",
type: "info",
showCancelButton: true,
focusConfirm: false,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes",
cancelButtonText: "No"
}, function (isConfirm) {})
我需要在右上角添加一个关闭按钮。 根据文档,关闭按钮仅适用于SweetAlert2库。
是否可以在SweetAlert1库中添加关闭按钮?
swal({
title: "Are you sure?",
text: "Test message?",
type: "info",
showCancelButton: true,
focusConfirm: false,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes",
cancelButtonText: "No",
showCloseButton: true,
只需添加showCloseButton: true
,这将在弹出窗口的右上角显示关闭的X图标。
来源:请参阅SweetAlerts2文档中的“自定义HTML说明和带ARIA标签的按钮”示例
请注意,它在SweetAlert1库中不可用,现在已弃用,我建议使用SweetAlert2。
您可以定义一个mySwal
包装器来检查showCloseButton
参数。
这是原始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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.