jsp中点击按钮弹出模态框
时间: 2024-03-18 14:41:09 浏览: 61
在JSP页面中,你可以使用Bootstrap框架中的模态框来实现弹出功能。以下是一个简单的示例代码:
1. 引入Bootstrap框架:
```html
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
```
2. 在JSP页面中添加一个按钮:
```html
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">弹出模态框</button>
```
3. 添加模态框的代码:
```html
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">模态框标题</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<p>模态框内容</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
```
这样,当用户点击按钮时,就会弹出一个模态框。你可以根据需要修改模态框的标题、内容和按钮等。
阅读全文