用bookstrap3写一个确认取消弹出框,确认功能的调用方式为url
时间: 2024-01-22 19:17:22 浏览: 29
好的,以下是一个基于Bootstrap 3的确认取消弹出框示例代码,确认功能的调用方式为url:
```html
<!-- 引入 Bootstrap 样式文件 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- 在页面中添加一个按钮,点击后弹出确认取消弹出框 -->
<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">
<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="confirmModalLabel">确认操作</h4>
</div>
<div class="modal-body">
确认要执行该操作吗?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<a href="http://example.com" class="btn btn-primary">确认</a>
</div>
</div>
</div>
</div>
<!-- 引入 jQuery 和 Bootstrap JavaScript 文件 -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
```
在上面的代码中,我们使用了 Bootstrap 的 Modal 组件来实现确认取消弹出框。点击按钮时,我们通过 `data-toggle="modal"` 和 `data-target="#confirmModal"` 属性来触发弹出框的显示。弹出框的内容包括标题、提示信息、取消按钮和确认按钮。点击确认按钮时,会跳转到一个指定的链接,这里我们使用了 `<a>` 标签并设置了 `href` 属性。你可以将 `http://example.com` 替换成你需要调用的 url。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)