jsp中利用Jquery点击按钮弹出修改用户信息的好看的模态框
时间: 2024-03-18 13:41:36 浏览: 87
您可以使用Bootstrap框架中的模态框来实现这个功能,以下是一个简单的示例:
1. 在JSP页面中引入jQuery和Bootstrap框架的相关文件:
```html
<!-- 引入jQuery文件 -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- 引入Bootstrap框架的CSS和JS文件 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
```
2. 创建一个按钮,添加点击事件,触发模态框弹出:
```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">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">修改用户信息</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="username">用户名:</label>
<input type="text" class="form-control" id="username">
</div>
<div class="form-group">
<label for="password">密码:</label>
<input type="password" class="form-control" id="password">
</div>
<div class="form-group">
<label for="email">邮箱:</label>
<input type="email" class="form-control" id="email">
</div>
</form>
</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>
```
4. 在JavaScript代码中添加保存修改按钮的点击事件,获取表单中的数据并提交到后台:
```javascript
$(function() {
// 点击保存修改按钮
$('.modal-footer .btn-primary').click(function() {
// 获取表单数据
var username = $('#username').val();
var password = $('#password').val();
var email = $('#email').val();
// TODO: 将表单数据提交到后台处理
// 关闭模态框
$('#myModal').modal('hide');
});
});
```
以上是一个简单的示例,您可以根据实际需求进行修改和扩展。
阅读全文