js实现弹窗

使用 alert 实现简单弹窗

alert 是浏览器原生方法，直接显示一条消息和确认按钮。

alert('这是一个简单的弹窗');

使用 confirm 实现确认弹窗

confirm 弹窗包含确认和取消按钮，返回布尔值。

const isConfirmed = confirm('确定要执行此操作吗？');
if (isConfirmed) {
    console.log('用户点击了确认');
} else {
    console.log('用户点击了取消');
}

使用 prompt 实现输入弹窗

prompt 弹窗允许用户输入内容，返回输入的字符串或 null。

const userInput = prompt('请输入您的名字：');
if (userInput !== null) {
    console.log('输入的内容：', userInput);
}

自定义 HTML 弹窗

通过 DOM 操作创建自定义弹窗，灵活性更高。

<div id="customModal" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); background:white; padding:20px; border:1px solid #ccc;">
    <p>这是一个自定义弹窗</p>
    <button onclick="document.getElementById('customModal').style.display='none'">关闭</button>
</div>
<button onclick="document.getElementById('customModal').style.display='block'">打开弹窗</button>

使用第三方库（如 SweetAlert）

SweetAlert 提供美观的弹窗，需先引入库文件。

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    Swal.fire({
        title: '提示',
        text: '这是一个更漂亮的弹窗',
        icon: 'success'
    });
</script>

注意事项

• 原生弹窗（alert、confirm、prompt）会阻塞页面交互，慎用。
• 自定义弹窗需处理遮罩层和关闭逻辑，确保用户体验。
• 第三方库（如 SweetAlert、Toastify）能快速实现复杂效果，但需加载额外资源。