模态形式引导程序

简介

模态形式引导程序是一种让用户更加易于使用的引导程序。它强制用户在完成引导前必须完成一些操作，同时把注意力集中在当前的任务上，避免用户被其他干扰分心。

实现

要实现模态形式引导程序，我们需要使用一个通用的方法：将一些组件用div封装起来，添加modal类以及display:none属性，用Javascript控制其显示或隐藏。

<div class="modal" style="display:none;">
  <!-- 这里放置弹出页面的html代码 -->
</div>

// 控制显示或隐藏函数
function showModal(modal) {
  modal.style.display = "block";
}
function hideModal(modal) {
  modal.style.display = "none";
}

但是，单单封装是远远不够的。模态形式引导程序还需要实现一些关键的功能。

关键功能

遮罩效果

要实现遮罩效果，我们需要在页面上添加遮罩层（灰色这样默认颜色）。这样可以让用户专注于弹出页面，将注意力从背景明显减弱。

<div class="modal-background">
  <div class="modal" style="display:none;">
    <!-- 这里放置弹出页面的html代码 -->
  </div>
</div>

我们需要在modal-background上添加样式，这样就能实现遮罩效果。

.modal-background {
  position: fixed; /* 关键：控制在可视窗口内固定位置 */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明效果 */
}

关闭按钮

当用户完成弹出页面的任务后，需要有一个便利的方式来关闭弹出页面。推荐的方式是使用一个X符号来表示关闭。

<div class="modal-background">
  <div class="modal" style="display:none;">
    <div class="modal-close">×</div> <!-- 关闭按钮 -->
    <!-- 这里放置弹出页面的html代码 -->
  </div>
</div>

我们需要在modal-close上添加样式，这样就能实现关闭按钮。

.modal-close {
  position: absolute; /* 关键：控制位置 */
  top: 0;
  right: 0;
  padding: 10px;
  font-size: 24px;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
}

ESC键

当用户在弹出页面上使用键盘时，我们需要为他们提供一个避免意外退出的方法。常用的方法是使用ESC键来关闭弹出页面。

// 键盘事件触发函数
function onkeydown(event) {
  if (event.keyCode == 27) { // 按下ESC键
    hideModal(document.querySelector("modal"));
  }
}
// 注册事件
window.addEventListener("keydown", onkeydown);

堆栈

在一个页面上可能存在多个弹出页面，这就需要维护一个堆栈，每次打开页面时入栈，关闭时出栈。

// 初始化空堆栈数组
var modals = [];
// 打开弹出页面
function showModal(modal) {
  modal.style.display = "block";
  modals.push(modal);
}
// 关闭弹出页面
function hideModal(modal) {
  modal.style.display = "none";
  modals.pop();
}
// ESC键关闭最上方的弹出页面
function onkeydown(event) {
  if (event.keyCode == 27) { // 按下ESC键
    hideModal(modals[modals.length - 1]);
  }
  return true;
}
// 点击遮罩层关闭最上方的弹出页面
document.querySelector(".modal-background").addEventListener("click", (event) => {
  event.stopPropagation(); // 防止被模态框的点击事件处理
  hideModal(modals[modals.length - 1]);
});

结论

模态形式引导程序在用户引导方面的使用已经非常广泛了。如果你还没有使用过，那么现在是时候去尝试一下了！