tablestrap 弹出确认框
时间: 2023-10-08 15:07:59 浏览: 41
如果你使用的是 Bootstrap 框架,可以使用 Bootstrap 的 Modal 组件来实现弹出确认框。以下是一个简单的示例:
```html
<!-- 引入 Bootstrap 样式和 JavaScript -->
<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>
<!-- 一个按钮,点击弹出确认框 -->
<button class="btn btn-primary" data-toggle="modal" data-target="#confirmModal">点击弹出确认框</button>
<!-- 确认框的 HTML 代码 -->
<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="confirmModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="confirmModalLabel">确认框标题</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
确认框内容
</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>
```
这个示例中,我们定义了一个按钮,点击这个按钮会弹出一个确认框。确认框的 HTML 代码在 `div` 元素中,其中 `id` 属性为 `confirmModal`,和按钮中的 `data-target` 属性相对应。确认框中包含一个标题、一个内容和两个按钮,分别为“取消”和“确认”。点击“取消”按钮或者确认框外的区域都会关闭确认框,点击“确认”按钮会执行默认行为。你可以在“确认”按钮的 `onclick` 事件中编写你需要执行的代码。