jsp页面使用弹窗插件bootstrap 示例

在JSP页面中使用Bootstrap弹窗插件的步骤与普通HTML页面大致相同，只需要注意一些细节。

以下是一个简单的JSP页面，演示如何使用Bootstrap创建一个弹窗：

1. 首先，需要在JSP页面中引入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. 在JSP页面中，创建一个按钮，用于触发弹窗。例如：

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

这个按钮与在HTML页面中的按钮相同。

3. 创建弹窗的代码。在JSP页面中，可以使用JSP标签来动态生成弹窗的内容。例如：

<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>${message}</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>

在这个例子中，弹窗的正文部分使用了JSP表达式`${message}`，这个表达式会被动态替换为实际的内容。

4. 这个弹窗现在已经可以在JSP页面中使用了。当用户点击按钮时，会出现一个弹窗，显示弹窗中的内容。用户可以使用关闭按钮或者按下ESC键来关闭弹窗。需要注意的是，JSP页面中使用弹窗插件时，需要确保生成的HTML代码符合Bootstrap的要求，否则可能会出现样式问题。