Bootstrap中点击链接<a></a>,打开模态框
时间: 2023-12-16 15:02:15 浏览: 157
要在Bootstrap中通过点击链接打开模态框,可以使用以下步骤:
1. 在 `<a>` 标签中添加 `data-toggle="modal"` 和 `data-target="#myModal"` 属性,其中 `#myModal` 是要打开的模态框的 ID。例如:
```
<a href="#" data-toggle="modal" data-target="#myModal">打开模态框</a>
```
2. 在页面中添加一个模态框,其中 `id` 属性与 `data-target` 中的值相同。例如:
```
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<!-- 模态框内容 -->
</div>
</div>
</div>
```
3. 在模态框中添加内容,例如表单、图片、文本等。
这样就可以通过点击链接打开模态框了。注意,如果你使用的是 Bootstrap 4,`data-target` 属性的值应该加上 `#`,例如 `data-target="#myModal"`。
阅读全文