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>
1
2
3
4
5
6
7
8
9

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

一些常规用法：

data-bs-backdrop="static"
1

黑色区域不可点击

data-bs-keyboard="false"
1

ESC 不可用

aria-hidden="true"
1

先隐藏

modal-dialog-scrollable
1

模态框内部滚动

modal-dialog-centered
1

垂直居中，一般也不用

container-fluid
1

支持网格

data-bs-target

data-bs-toggle="modal"
1
2
3

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

modal-fullscreen-sm-down
1

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

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

modal-fullscreen
1

全屏显示

data-bs-dismiss="modal"
1

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

myModal.show()
1

js 显示模态框

myModal.hide()
1

隐藏模态框

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

获取模态框实例

---

模态框事件

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...
})
1
2
3
4