用bookstrap3写一个提示框,注:点击某操作时弹出该提示框,然后点击确认则执行操作,点击取消则取消
时间: 2023-07-04 21:07:28 浏览: 59
可以参考以下代码,使用Bootstrap 3的Modal组件来实现提示框:
```html
<!-- 弹出提示框的按钮 -->
<button class="btn btn-primary" data-toggle="modal" data-target="#confirmModal">点击我弹出提示框</button>
<!-- 提示框 -->
<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="confirmModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="confirmModalLabel">确认操作</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-primary" onclick="doSomething()">确认</button>
</div>
</div>
</div>
</div>
<script>
function doSomething() {
// 执行操作的代码
console.log('执行操作');
}
</script>
```
解释一下代码:
1. 首先是一个按钮,通过设置`data-toggle`和`data-target`属性,点击该按钮会弹出`id`为`confirmModal`的模态框。
2. 接下来是模态框的 HTML 结构,包括标题、内容和底部的按钮。其中,`data-dismiss="modal"`表示点击取消按钮时关闭模态框。
3. 最后是一个 JavaScript 函数`doSomething`,该函数是点击确认按钮时执行的操作。
你可以将`doSomething`函数替换成你需要执行的操作,例如发送 AJAX 请求、修改页面元素等。