jsp弹窗插件bootstrap 示例

Bootstrap是一个流行的前端框架，它提供了许多有用的组件，包括弹窗。以下是一个简单的例子，演示如何使用Bootstrap创建一个弹窗：

1. 首先，需要引入Bootstrap的CSS和JS文件。可以在head标签中添加以下代码：

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>

2. 在HTML中，创建一个按钮，用于触发弹窗。例如：

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  点击打开弹窗
</button>

这个按钮有两个关键的属性：data-toggle和data-target。data-toggle告诉Bootstrap这是一个触发弹窗的按钮，data-target指定要打开的弹窗的ID。

3. 创建弹窗的HTML代码。例如：

<div class="modal" tabindex="-1" role="dialog" id="myModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">这是一个弹窗</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>这里可以放一些内容</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>

这个代码中，div元素的ID与之前按钮中data-target指定的ID相同。这个弹窗包含一个标题、一个关闭按钮、正文和一个底部区域，其中有两个按钮。

4. 这个弹窗现在已经可以使用了。当用户点击按钮时，会出现一个弹窗，显示弹窗中的内容。用户可以使用关闭按钮或者按下ESC键来关闭弹窗。