反应 js 警报弹出示例 - JavaScript

在 JavaScript 中，警报是一种常见的通知机制，用于向用户显示重要信息。在本文中，我们将介绍如何在 JavaScript 中使用警报弹出框。

警报弹出框是一个简单的对话框，包含一条消息和一个“确定”按钮。当用户单击“确定”按钮时，警报弹出框将关闭。

代码实现

以下代码使用 alert() 函数创建警报弹出框，并使用 onclick 事件将其绑定到按钮上：

<button onclick="alert('Hello, world!')">点击这里显示警报</button>

在上述代码中，我们使用 alert() 函数创建一个警报弹出框，并使用 onclick 事件将其绑定到按钮上。当用户单击按钮时，将显示一个警报弹出框，其中包含消息“Hello, world!”。

自定义警报弹出框

除了使用 alert() 函数，您还可以自定义警报弹出框。以下代码使用 HTML 和 CSS 创建一个自定义警报弹出框：

<div class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Hello, world!</p>
  </div>
</div>

/* 弹出框样式 */
.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;
}

在上述代码中，我们定义了一个名为 modal 的 div 元素，用于显示弹出框。我们还定义了一个名为 modal-content 的 div 元素，用于显示弹出框的内容。 close 类的 span 元素用于显示关闭按钮。 CSS 样式定义了弹出框的大小、颜色和位置，以及关闭按钮的样式。

以下代码使用 JavaScript 显示自定义警报弹出框：

// 获取弹出框元素和关闭按钮元素
var modal = document.querySelector('.modal');
var closeButton = document.querySelector('.close');

// 显示弹出框
modal.style.display = 'block';

// 关闭弹出框
closeButton.onclick = function() {
  modal.style.display = 'none';
}

在上述 JavaScript 代码中，我们获取了弹出框元素和关闭按钮元素，并使用 style.display 属性将弹出框设置为可见。我们还在关闭按钮上绑定了一个 onclick 事件，以便在用户单击关闭按钮时关闭弹出框。

结论

在 JavaScript 中，警报弹出框是一种很有用的通知机制，用于向用户显示重要信息。您可以使用 alert() 函数创建默认警报弹出框，或使用 HTML、CSS 和 JavaScript 自定义您自己的警报弹出框。