js弹出窗口 alert

alert 是 JavaScript 中的一个内置函数，用于在浏览器中显示一个对话框，该对话框包含一条消息和一个“确定”按钮。用户必须点击“确定”按钮才能关闭该对话框。

基础概念

函数调用：alert(message)，其中 message 是要在对话框中显示的字符串。
同步执行：alert 会阻塞脚本的执行，直到用户关闭对话框。

优势

简单易用：无需复杂的代码即可实现弹窗功能。
跨浏览器兼容：几乎所有现代浏览器都支持 alert 函数。

类型

alert 只有一种类型，即简单的文本消息对话框。

应用场景

错误提示：当用户输入错误或发生错误时，可以使用 alert 提示用户。
确认操作：在执行某些重要操作前，可以使用 alert 提醒用户确认。
信息提示：向用户展示一些必要的信息。

示例代码

// 显示一个简单的警告框
alert("这是一个警告框！");

// 在用户点击按钮后显示警告框
document.getElementById("myButton").addEventListener("click", function() {
  alert("按钮被点击了！");
});

注意事项

用户体验：频繁使用 alert 可能会影响用户体验，因为它会打断用户的操作流程。
样式限制：alert 对话框的样式由浏览器控制，无法自定义。
阻塞执行：由于 alert 是同步的，它会阻塞后续脚本的执行，直到用户关闭对话框。

替代方案

为了避免 alert 的一些缺点，可以使用以下替代方案：

confirm：用于显示一个带有“确定”和“取消”按钮的对话框，可以获取用户的确认结果。
prompt：用于显示一个带有输入框的对话框，可以获取用户的输入。
自定义模态框：使用 HTML、CSS 和 JavaScript 创建自定义的模态框，可以完全控制样式和行为。

示例代码（自定义模态框）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom Modal</title>
  <style>
    .modal {
      display: none;
      position: fixed;
      z-index: 1;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0,0,0,0.4);
    }
    .modal-content {
      background-color: #fefefe;
      margin: 15% auto;
      padding: 20px;
      border: 1px solid #888;
      width: 80%;
    }
    .close {
      color: #aaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }
    .close:hover,
    .close:focus {
      color: black;
      text-decoration: none;
      cursor: pointer;
    }
  </style>
</head>
<body>

<button id="openModal">打开模态框</button>

<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>这是一个自定义模态框！</p>
  </div>
</div>

<script>
  var modal = document.getElementById("myModal");
  var btn = document.getElementById("openModal");
  var span = document.getElementsByClassName("close")[0];

  btn.onclick = function() {
    modal.style.display = "block";
  }

  span.onclick = function() {
    modal.style.display = "none";
  }

  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }
</script>

</body>
</html>

这个示例展示了如何使用 HTML、CSS 和 JavaScript 创建一个自定义的模态框，可以更好地控制样式和行为，提升用户体验。