Bootstrap Modal

最新推荐文章于 2025-01-28 18:14:00 发布

原创最新推荐文章于 2025-01-28 18:14:00 发布 · 537 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #前端

Bootstrap 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了Bootstrap的模态框（Modal）组件，包括其基本结构、常用属性和事件，如data-bs-backdrop、data-bs-keyboard、aria-hidden等。还讨论了模态框的显示、隐藏方法以及如何通过JavaScript操作模态框实例。此外，提到了模态框的事件监听，如show.bs.modal、hidden.bs.modal等，以便在特定时刻执行相关操作。

Modal

一种bootstrap 的对话框。与用户进行交互。

主要构成：

<div class="modal fade" data-bs-keyboard="false" aria-hidden="true">  
    <div class="modal-dialog">  
        <div class="modal-content">  
            <div class="modal-header"></div>  
            <div class="modal-body"></div>  
            <div class="modal-footer"></div>  
        </div>    
    </div>
</div>

modal -> modal-dialog -> modal-content -> modal-header -body -footer

一些常规用法：

data-bs-backdrop="static"

黑色区域不可点击

data-bs-keyboard="false"

ESC 不可用

aria-hidden="true"

先隐藏

modal-dialog-scrollable

模态框内部滚动

modal-dialog-centered

垂直居中，一般也不用

container-fluid

支持网格

data-bs-target

data-bs-toggle="modal"

为元素指定点击之后要显示的模态框

modal-fullscreen-sm-down

576px 以下宽度屏幕会全屏显示模态框，其他正常显示

-md- 768, -lg- 992, -xl-1200, -xxl- 1400

modal-fullscreen

全屏显示

data-bs-dismiss="modal"

消除当前模态框，通常放在modal-header里用来关闭模态框，模态框外就需要用 data-bs-target 指定要消除的模态框

myModal.show()

js 显示模态框

myModal.hide()

隐藏模态框

var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance

获取模态框实例

模态框事件

show.bs.modal

show调用实例方法时立即触发此事件。如果由单击引起，则单击的元素可用作relatedTarget事件的属性。

shown.bs.modal

当模式对用户可见时触发此事件（将等待 CSS 转换完成）。如果由单击引起，则单击的元素可用作relatedTarget事件的属性。

hide.bs.modal

hide调用实例方法时立即触发此事件。

hidden.bs.modal

当模态对用户隐藏完成时会触发此事件（将等待 CSS 转换完成）。

hidePrevented.bs.modal

当显示模态时触发此事件，其背景是static并且在模态外部单击或使用键盘选项执行退出键或data-bs-keyboard设置为false。

监听事件来进行相关操作

var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
  // do something...
})