引导程序4 | 模态

简介

引导程序4是一种基于模态的引导程序，可以在页面的特定位置弹出一个模态，展示相关信息和引导用户完成特定操作。

安装

可以使用npm进行安装：

npm install bootstrap

也可以通过CDN使用，例如：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>

使用

HTML结构

首先，在需要展示模态的位置添加一个按钮：

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

其中，“data-bs-toggle”属性表示展开模态，“data-bs-target”属性表示展开哪一个模态。对应的，我们需要添加一个模态的结构：

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

其中，“id”属性要与按钮的“data-bs-target”对应，“modal-header”中的标题和关闭按钮，可以自行修改，其他结构也可根据需要添加或修改。

JavaScript控制

如果需要通过JavaScript控制模态的展开和关闭，可以使用Bootstrap提供的相关API：

var myModal = new bootstrap.Modal(document.getElementById('exampleModal'))
myModal.show();   // 弹出模态
myModal.hide();   // 关闭模态

Demo

可以查看GitHub Demo，了解更多的模态展示样式和操作方式。

结束语

引导程序4中模态的使用，可以有效地向用户展示相关信息，并引导用户完成必要的操作。使用起来方便简单，可以根据需要进行定制和扩展。