如何不再显示弹出窗口(使用现有的库)

要在Web应用中不再显示弹出窗口，通常是指阻止浏览器默认的弹窗行为，比如alert、confirm和prompt。如果你想使用现有的库来实现这一功能，可以考虑使用JavaScript库如SweetAlert2来替代原生的弹窗。

基础概念

SweetAlert2是一个基于Promise的弹窗库，它提供了丰富的自定义选项和美观的UI，可以替代浏览器原生的alert、confirm和prompt。

优势

美观：提供多种主题和自定义选项。
可定制：可以自定义弹窗的标题、内容、按钮等。
基于Promise：使用现代JavaScript的Promise API，使得代码更简洁。
兼容性：支持大多数现代浏览器。

类型

SweetAlert2提供了多种类型的弹窗，包括但不限于：

swal.fire()：基本弹窗。
swal.fire({ icon: 'success' })：带有特定图标的弹窗。
swal.fire({ icon: 'question', showCancelButton: true })：带有取消按钮的确认弹窗。

应用场景

适用于需要自定义弹窗样式和行为的场景，比如：

表单验证
用户确认操作
显示通知信息

示例代码

以下是如何使用SweetAlert2来替代原生的alert和confirm：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SweetAlert2 Example</title>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</head>
<body>
    <button onclick="showAlert()">Show Alert</button>
    <button onclick="showConfirm()">Show Confirm</button>

    <script>
        function showAlert() {
            Swal.fire({
                title: 'Hello!',
                text: 'This is a custom alert.',
                icon: 'info'
            });
        }

        function showConfirm() {
            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire(
                        'Deleted!',
                        'Your file has been deleted.',
                        'success'
                    );
                }
            });
        }
    </script>
</body>
</html>