bootstrap按钮设置为“删除”,点一下弹出提示框再次确认是否删除的jsp代码
时间: 2024-05-16 17:14:04 浏览: 131
以下是一个基本的示例,其中使用了Bootstrap按钮和jQuery:
```html
<!-- 引入Bootstrap和jQuery库 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- 删除按钮 -->
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal">删除</button>
<!-- 确认删除模态框 -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel">
<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="deleteModalLabel">确认删除</h4>
</div>
<div class="modal-body">
确定要删除吗?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-danger" id="confirmDelete">删除</button>
</div>
</div>
</div>
</div>
<!-- JavaScript代码 -->
<script>
$(document).ready(function() {
// 当点击确认删除按钮时
$('#confirmDelete').click(function() {
// 执行删除操作
// ...
// 关闭模态框
$('#deleteModal').modal('hide');
});
});
</script>
```
在这个示例中,当用户点击“删除”按钮时,会弹出一个模态框,询问用户是否确认删除。如果用户点击“删除”按钮,则会执行删除操作,并关闭模态框。如果用户点击“取消”按钮,则只关闭模态框。请注意,这只是一个基本示例,您需要根据您的具体需求进行修改。
阅读全文