AlertBox 弹出层信息提示框效果实现步骤

实现 AlertBox 弹出层信息提示框的步骤如下：

1. 定义 HTML 结构

首先需要定义一个 HTML 结构，用于存放提示框的内容。可以使用 div 元素作为容器，设置其 id 属性值为任意名称，例如 alertBox：

<div id="alertBox">
  <div class="content">
    <h2>Title</h2>
    <p>Message goes here.</p>
    <button>OK</button>
  </div>
</div>

在提示框中，我们通常需要展示提示标题、提示信息以及一个确认按钮。还可以添加其他样式和元素，根据实际需求自定义。

2. CSS 样式设置

需要为提示框设置一些样式，使其看起来更美观。可以使用 CSS 的 position 属性将其定位到屏幕中央，然后添加一些背景颜色、边框、圆角、阴影等样式效果。

以下是一个示例 CSS 样式：

#alertBox {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  width: 400px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
#alertBox .content {
  padding: 20px;
  text-align: center;
}
#alertBox h2 {
  font-size: 24px;
  margin-bottom: 10px;
}
#alertBox p {
  font-size: 16px;
  margin-bottom: 20px;
}
#alertBox button {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
#alertBox button:hover {
  background-color: #0063cc;
}

请注意，以上示例样式仅供参考，样式可以根据具体需求进行自定义。

3. JavaScript 代码实现

利用 JavaScript，可以通过添加 class 控制提示框的隐藏和显示。首先需要将弹出框的样式设置为 display:none，然后在需要弹出时设置为 display:block。

以下是 JavaScript 代码的示例:

// 找到提示框元素
const alertBox = document.querySelector('#alertBox');
// 找到确认按钮元素
const confirmButton = document.querySelector('#alertBox button');

// 弹出提示框
function showAlert() {
  //显示提示框
  alertBox.classList.add('show');
  //取消底层滚动
  document.body.style.overflow = 'hidden';
}

// 隐藏提示框
function hideAlert() {
  //隐藏提示框
  alertBox.classList.remove('show');
  //恢复底层滚动
  document.body.style.overflow = '';
}

//绑定确认按钮的点击事件
confirmButton.addEventListener('click', hideAlert);

在调用弹出提示框前，需要先手动写一些触发事件，如单击按钮，下面是一个示例：

// 找到触发按钮元素
const triggerButton = document.querySelector('#triggerButton');

// 绑定触发按钮的点击事件
triggerButton.addEventListener('click', showAlert);

当单击触发按钮时，将会调用 showAlert() 函数介绍的弹出提示框的方法。当单击提示框中的确认按钮时，将会调用 hideAlert() 方法介绍的隐藏提示框的方法。

示例说明

以下是两个 AlertBox 的示例：

在某个按钮被单击时，出现提示框，用户可以选择确认或取消。

<button id="triggerButton">Show AlertBox</button>
<div id="alertBox">
  <div class="content">
    <h2>Confirmation</h2>
    <p>Are you sure you want to delete?</p>
    <button id="confirmButton">Confirm</button>
    <button id="cancelButton">Cancel</button>
  </div>
</div>
<script>
  const alertBox = document.querySelector('#alertBox');
  const confirmButton = document.querySelector('#confirmButton');
  const cancelButton = document.querySelector('#cancelButton');
  const triggerButton = document.querySelector('#triggerButton');

  function showAlert() {
    alertBox.classList.add('show');
    document.body.style.overflow = 'hidden';
  }

  function hideAlert() {
    alertBox.classList.remove('show');
    document.body.style.overflow = '';
  }

  function deleteData() {
    //TODO：实现删除数据的业务逻辑
    hideAlert();
  }

  triggerButton.addEventListener('click', showAlert);
  confirmButton.addEventListener('click', deleteData);
  cancelButton.addEventListener('click', hideAlert);
</script>

上述示例中，当单击 "Show AlertBox" 按钮时，提示框将会出现。用户可以选择确认或取消。当用户确认时，将会执行deleteData() 函数中的逻辑删除数据，并隐藏提示框。当用户取消时，将仅仅隐藏提示框。

在网页加载完毕时，出现提示框，用户需要输入密码并单击确认才能进入页面。

<!--在body里加入如下代码-->
<body onload="showAlert();">
  <div id="alertBox">
    <div class="content">
      <h2>Enter Password</h2>
      <input type="password" id="passwordInput" />
      <button id="confirmButton">Confirm</button>
    </div>
  </div>
  <!-- 正常内容区域 -->
</body>

<script>
  const alertBox = document.querySelector('#alertBox');
  const confirmButton = document.querySelector('#confirmButton');
  const passwordInput = document.querySelector('#passwordInput');

  function showAlert() {
    alertBox.classList.add('show');
    document.body.style.overflow = 'hidden';
  }

  function hideAlert() {
    alertBox.classList.remove('show');
    document.body.style.overflow = '';
  }

  function validatePassword() {
    const password = passwordInput.value;
    if (password === '123456') {
      hideAlert();
    } else {
      alert('Password incorrect!');
      passwordInput.value = '';
      passwordInput.focus();
    }
  }

  confirmButton.addEventListener('click', validatePassword);
</script>

上述示例中，当网页加载完毕时，提示框将会出现。用户需要输入正确的密码，并单击确认按钮，才能进入正常的页面。如果输入密码不正确，提示框将不能隐藏，并且密码输入框将会得到焦点以等待用户修正密码。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：AlertBox 弹出层信息提示框效果实现步骤 - Python技术站

AlertBox 弹出层信息提示框效果实现步骤

1. 定义 HTML 结构

2. CSS 样式设置

3. JavaScript 代码实现

示例说明

相关文章