js实现弹窗的几种方法

使用alert()方法

alert()是最简单的弹窗方法，用于显示一条消息和一个确认按钮。

alert("这是一个警告弹窗");

缺点：无法自定义样式，且会阻塞代码执行直到用户点击确认。

使用confirm()方法

confirm()弹窗包含消息、确认和取消按钮，返回布尔值表示用户选择。

const result = confirm("确认删除吗？");
if (result) {
  console.log("用户确认");
} else {
  console.log("用户取消");
}

适用于需要用户确认的场景。

使用prompt()方法

prompt()弹窗包含输入框，用于获取用户输入的文本。

const userName = prompt("请输入用户名", "默认值");
if (userName !== null) {
  console.log("输入内容:", userName);
}

第二个参数为输入框的默认值。

使用HTML+CSS自定义弹窗

通过DOM操作动态创建弹窗元素，实现高度自定义。

<div id="customModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>自定义弹窗内容</p>
  </div>
</div>

const modal = document.getElementById("customModal");
const closeBtn = document.querySelector(".close");
modal.style.display = "block";
closeBtn.onclick = () => {
  modal.style.display = "none";
};

CSS需配合设置样式（如.modal { display: none; }）。

使用第三方库（如SweetAlert）

SweetAlert提供美观且功能丰富的弹窗。
安装：

npm install sweetalert

使用示例：

import Swal from 'sweetalert';
Swal.fire({
  title: "成功",
  text: "操作已完成",
  icon: "success"
});

支持自定义图标、按钮和异步操作。

使用浏览器API：showModalDialog()（已废弃）

旧版浏览器支持，现代浏览器已弃用。

window.showModalDialog("url", "参数", "选项");

不建议在新项目中使用。