文章内容
2023/4/12 13:49:23,作 者: 黄兵
data-dismiss="" 的作用
今天看到这样一段代码：
<div class="modal fade" tabindex="-1" role="dialog">
<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">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
搞不明白，data-dismiss="" 的作用，于是查了一下资料，总结如下：
data-dismiss 是一个 Bootstrap 中的属性，通常用于关闭一个模态框（Modal）。
当 data-dismiss="modal" 被添加到一个按钮或链接上时，点击该按钮或链接将会关闭最近打开的模态框。该属性会自动移除模态框的 DOM 节点，同时会恢复其背后的页面的交互能力。
例如，以下代码片段定义了一个带有 "Close" 按钮的模态框，并使用 data-dismiss="modal" 使该按钮可以关闭模态框：
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
在上面的例子中，无论是在头部还是尾部的按钮上，data-dismiss="modal" 都会关闭模态框，使其消失。
参考资料：
1、模态框
2、chatGPT
黄兵个人博客原创。
转载请注明出处：黄兵个人博客 - data-dismiss="" 的作用
评论列表