html 点击触发模态框
时间: 2023-07-12 13:40:20 浏览: 47
要实现点击触发模态框的效果,你可以使用 Bootstrap 框架提供的 Modal 组件。具体实现步骤如下:
1. 在 HTML 文档中引入 Bootstrap 的 CSS 和 JS 文件。
```
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
```
2. 在 HTML 文档中添加一个按钮,设置其 data-toggle 和 data-target 属性。
```
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
点击触发模态框
</button>
```
其中,data-toggle 属性用于告诉 Bootstrap 这是一个触发模态框的按钮,data-target 属性用于指定要触发的模态框的 ID。
3. 在 HTML 文档中添加一个模态框,设置其 ID 和相关内容。
```
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">模态框标题</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>
```
其中,ID 必须与上面的 data-target 属性值相同。模态框中的内容可以根据需求自行修改。
4. 完成后,你就可以在页面上看到一个按钮,点击它就可以触发模态框了。