模態彈框（Modal）

使用Bootstrap的JavaScript模式插件將對話框添加到站點中，用于燈箱、用戶通知或完全自定義的內容。

On this page

工作原理

在開始使用Bootstrap互動視窗之前，請務必閱讀以下內容，因為菜單項目在近期內有修改。

互動視窗是用HTML、CSS和JavaScript構建的。它們位于文件中任何其他內容之上，并從body中刪除滾動，以便互動視窗的內容滾動。
點擊互動視窗“backdrop”將自動關閉互動視窗。
Bootstrap一次只支持一個互動視窗。不支持巢狀互動視窗，因為我們認為巢狀互動視窗用戶體驗不佳。
互動視窗使用position: fixed，在渲染呈現上會有點特別。盡可能將您的互動視窗HTML放置在頂級位置，以避免其他元素的潛在干擾。在另一個固定元素中內加入一個.modal的時候，你可能會遇到問題。
由于position: fixed，在移動設備上使用互動視窗有一些附加說明。有關詳細信息，請參閱我們的瀏覽器支持。
依據HTML5定義語義的方式，autofocus HTML屬性對Bootstrap互動視窗沒有影響。要達到同樣的效果，請使用一些自定義JavaScript：the autofocus HTML attribute

var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})

該組件的動畫效果取決于偏好減少的運動媒體查詢。請參閱我們的可訪問性文檔的簡化運動部分。

繼續閱讀demos和使用指南。

示例

下面是一個靜態動態視窗示例（意思是它的position和display已被復寫）。包括動態視窗標題、動態視窗主體（padding必要）和動態視窗頁腳（可選）。盡可能地包含動態視窗標題與移除按鈕，或提供另一個明確的移除操作。

<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
  <h5 class="modal-title">Modal title</h5>
  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></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-bs-dismiss="modal">Close</button>
  <button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

完整示例

通過點擊下面的按鈕切換動態視窗呈現。它將從頁面頂部向下滑動并淡入。

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
  <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
  ...
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  <button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

靜態背景

當將背景設置為靜態時，互動視窗不會因為點擊背景而關閉。

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
  <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
  ...
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  <button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>

滾動長內容

當使用者的動態視窗變得太長時，它們的滾動獨立于于頁面本身。透過下方示例了解：

What follows is just some placeholder text for this modal dialog. Sipping on Rosé, Silver Lake sun, coming up all lazy. It’s in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic.

We're living the life. We're doing it right. Open up your heart. I was tryna hit it and quit it. Her love is like a drug. Always leaves a trail of stardust. The girl's a freak, she drive a jeep in Laguna Beach. Fine, fresh, fierce, we got it on lock. All my girls vintage Chanel baby.

Before you met me I was alright but things were kinda heavy. Peach-pink lips, yeah, everybody stares. This is no big deal. Calling out my name. I could have rewrite your addiction. She's got that, je ne sais quoi, you know it. Heavy is the head that wears the crown. 'Cause, baby, you're a firework. Like thunder gonna shake the ground.

Just own the night like the 4th of July! I’m gon’ put her in a coma. What you're waiting for, it's time for you to show it off. Can't replace you with a million rings. You open my eyes and I'm ready to go, lead me into the light. And here you are. I’m gon’ put her in a coma. Come on, let your colours burst. So cover your eyes, I have a surprise. As I march alone to a different beat. Glitter all over the room pink flamingos in the pool.

You just gotta ignite the light and let it shine! Come just as you are to me. Just own the night like the 4th of July. Infect me with your love and fill me with your poison. Come just as you are to me. End of the rainbow looking treasure.

I can't sleep let's run away and don't ever look back, don't ever look back. I can't sleep let's run away and don't ever look back, don't ever look back. Yes, we make angels cry, raining down on earth from up above. I'm walking on air (tonight). Let you put your hands on me in my skin-tight jeans. Stinging like a bee I earned my stripes. I went from zero, to my own hero. Even brighter than the moon, moon, moon. Make 'em go, 'Aah, aah, aah' as you shoot across the sky-y-y! Why don't you let me stop by?

Boom, boom, boom. Never made me blink one time. Yeah, you're lucky if you're on her plane. Talk about our future like we had a clue. Oh my God no exaggeration. You're original, cannot be replaced. The girl's a freak, she drive a jeep in Laguna Beach. It's no big deal, it's no big deal, it's no big deal. In another life I would make you stay. I'm ma get your heart racing in my skin-tight jeans. I wanna walk on your wave length and be there when you vibrate Never made me blink one time.

We'd keep all our promises be us against the world. If you get the chance you better keep her. It's time to bring out the big, big, big, big, big, big balloons. I hope you got a healthy appetite. Don't let the greatness get you down, oh, oh yeah. Yeah, she's footloose and so fancy free. I want the jaw droppin', eye poppin', head turnin', body shockin'. End of the rainbow looking treasure.

除此之外您也可以透過在 .modal-dialog 中加入 .modal-dialog-scrollable 來創建一個 body 可滾動互動視窗。

What follows is just some placeholder text for this modal dialog. You just gotta ignite the light and let it shine! Come just as you are to me. Just own the night like the 4th of July. Infect me with your love and fill me with your poison. Come just as you are to me. End of the rainbow looking treasure.

We'd keep all our promises be us against the world. In another life I would be your girl. We can dance, until we die, you and I, will be young forever. And on my 18th Birthday we got matching tattoos. So open up your heart and just let it begin. 'Cause she's the muse and the artist. She eats your heart out. Like Jeffrey Dahmer (woo). Pop your confetti. (This is how we do) I know one spark will shock the world, yeah yeah. If you only knew what the future holds.

Sipping on Rosé, Silver Lake sun, coming up all lazy. It’s in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic.

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>

垂直居中

加入.modal-dialog-centered到.modal-dialog來使互動視窗垂直置中。

<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
...
</div>

<!-- Vertically centered scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
...
</div>

工具提示和彈出窗口

Tooltips和popovers可以根據需要放置在動態視窗。當動態視窗關閉時，其中的任何工具提示和插件也將自動關閉。

<div class="modal-body">
<h5>Popover in a modal</h5>
<p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-bs-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
<hr>
<h5>Tooltips in a modal</h5>
<p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>

使用網格

透過在.modal-body中加入.container-fluid在互動視窗中使用Bootstrap網格系統。然后像其他任何地方一樣使用正常的網格系統class。

<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
</div>
<div class="row">
<div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
<div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
</div>
<div class="row">
<div class="col-md-6 ms-auto">.col-md-6 .ms-auto</div>
</div>
<div class="row">
<div class="col-sm-9">
  Level 1: .col-sm-9
  <div class="row">
    <div class="col-8 col-sm-6">
      Level 2: .col-8 .col-sm-6
    </div>
    <div class="col-4 col-sm-6">
      Level 2: .col-4 .col-sm-6
    </div>
  </div>
</div>
</div>
</div>
</div>

有數個按鈕要用來觸發相同互動視窗，但會導入不同內容？使用event.relatedTarget和HTML data-bs-*屬性依據點擊按鈕來更改動態視窗的內容。

下面是HTML和JavaScript的示例。有關relatedTarget的詳細信息，請參閱互動視窗的事件。

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@getbootstrap">Open modal for @getbootstrap</button>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
  <h5 class="modal-title" id="exampleModalLabel">New message</h5>
  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
  <form>
    <div class="mb-3">
      <label for="recipient-name" class="col-form-label">Recipient:</label>
      <input type="text" class="form-control" id="recipient-name">
    </div>
    <div class="mb-3">
      <label for="message-text" class="col-form-label">Message:</label>
      <textarea class="form-control" id="message-text"></textarea>
    </div>
  </form>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  <button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>

var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
// Button that triggered the modal
  var button = event.relatedTarget
// Extract info from data-bs-* attributes
  var recipient = button.getAttribute('data-bs-whatever')
// If necessary, you could initiate an AJAX request here
  // and then do the updating in a callback.
  //
  // Update the modal's content.
  var modalTitle = exampleModal.querySelector('.modal-title')
var modalBodyInput = exampleModal.querySelector('.modal-body input')

modalTitle.textContent = 'New message to ' + recipient
modalBodyInput.value = recipient
})

Toggle between modals

在多個模態之間切換，巧妙地放置data-bs-target和data-bs-Toggle屬性。例如，可以在已打開的登錄模式中切換密碼重置模式。請注意，不能同時打開多個模態。這個方法只是在兩個單獨的模態之間切換。

Open first modal

<!-- First modal dialog -->
<div class="modal fade" id="modal" aria-hidden="true" aria-labelledby="..." tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
...
<div class="modal-footer">
  <!-- Toogle to second dialog -->
  <button class="btn btn-primary" data-bs-target="#modal2" data-bs-toggle="modal" data-bs-dismiss="modal">Open #modal2</button>
</div>
</div>
</div>
</div>
<!-- Second modal dialog -->
<div class="modal fade" id="modal2" aria-hidden="true" aria-labelledby="..." tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
...
<div class="modal-footer">
  <!-- Toogle to first dialog, `data-bs-dismiss` attribute can be omitted - clicking on link will close dialog anyway -->
  <a class="btn btn-primary" href="#modal" data-bs-toggle="modal" role="button">Open #modal</a>
</div>
</div>
</div>
</div>
<!-- Open first dialog -->
<a class="btn btn-primary" data-bs-toggle="modal" href="#modal" role="button">Open #modal</a>

更改動畫

$modal-fade-transform變數在互動視窗執行淡入動畫前會先確定.modal-dialog的轉換狀態，當互動視窗的淡入動畫結束時，$modal-show-transform變數會決定淡入動畫結束時.modal-dialog的轉換。

如果您想要一個放大的動畫，您可以設定$modal-fade-transform: scale（.8）

移除動畫

對于只要出現而不需要淡入淡出的互動視窗，你只需要在互動視窗中刪除.fade。

<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>

動態高度

如果互動視窗的高度在打開時發生變化，則應呼叫myModal.handleUpdate（）以重新調整互動視窗的位置，以防滾動條出現。

可達性

請務必在.modal上添加aria-labelledby=“…”來引用互動視窗標題。另外，你也可以在.modal上使用aria-describedby來描述你的動態視窗。請注意你不需要加上role=“dialog”，因為bootstrap的JavaScript已經有添加了。

嵌入YouTube視頻

在互動視窗上嵌入YouTube視頻需要額外的JavaScript以自動停止回放或其他更多功能。有關詳細信息，請參閱Stack Overflow的文章。 See this helpful Stack Overflow post for more information.

可選尺寸

互動視窗有三個可選的大小，透過.modal-dialog上的modifier Class啟用。這些尺寸會在某些斷點調整，以避免在較窄的viewport上出現水平卷軸。

Size	Class	Modal max-width
Small	`.modal-sm`	`300px`
Default	None	`500px`
Large	`.modal-lg`	`800px`
Extra large	`.modal-xl`	`1140px`

預設的互動視窗沒有“medium”這個類別的大小。

<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>

另一個的覆蓋選項是跳出一個完全覆蓋用戶屏幕的互動視窗，可透過在.modal-dialog上放置修飾類別來啟用。

Class	Availability
`.modal-fullscreen`	Always
`.modal-fullscreen-sm-down`	Below `576px`
`.modal-fullscreen-md-down`	Below `768px`
`.modal-fullscreen-lg-down`	Below `992px`
`.modal-fullscreen-xl-down`	Below `1200px`
`.modal-fullscreen-xxl-down`	Below `1400px`

<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
...
</div>

What follows is just some placeholder text for this modal dialog. I feel like I'm already there. I’m gon’ put her in a coma. Boom, boom, boom. You're reading me like erotica, boy, you make me feel exotic, yeah. Happy birthday. From Tokyo to Mexico, to Rio. I knew you were.

Last Friday night. Calling out my name. Kiss her, touch her, squeeze her buns. Heavy is the head that wears the crown. So open up your heart and just let it begin. Boy all this time was worth the waiting. You know that I'm the girl that you should call. End of the rainbow looking treasure. You're reading me like erotica, boy, you make me feel exotic, yeah. Do you know that there's still a chance for you 'Cause there's a spark in you? So I sat quietly, agreed politely. From Tokyo to Mexico, to Rio.

Don't be a shy kinda guy I'll bet it's beautiful. You fall asleep during foreplay, 'Cause the pills you take, are more your forte. Open up your heart. You're never gonna be unsatisfied. Know that you are worthy. This one goes out to the ladies at breakfast in last night's dress. You think you've seen her in a magazine. I should've told you what you meant to me 'Cause now I pay the price. Takes you miles high, so high, 'cause she’s got that one international smile.

Yo, shout out to all you kids, buying bottle service, with your rent money. So I sat quietly, agreed politely. They say, be afraid you're not like the others, futuristic lover. Boom, boom, boom. Don't need apologies. We can dance, until we die, you and I, will be young forever. If you choose to walk away, don’t walk away. You know that I'm the girl that you should call. This Friday night, do it all again.

I'm walking on air. But lil' mama so dope. It's time to bring out the big balloons. Are you ready for, ready for. The boys break their necks try'na to creep a little sneak peek. Summer after high school when we first met. If you want it all. (This is how we do) You open my eyes and I'm ready to go, lead me into the light.

Growing fast into a bolt of lightning. We freak in my jeep, Snoop Doggy Dogg on the stereo. Baby do you dare to do this? Open up your heart and just let it begin. Peach-pink lips, yeah, everybody stares. Be your teenage dream tonight. Are you brave enough to let me see your peacock? You think I'm funny when I tell the punchline wrong. Woo! I knew you were. All this money can't buy me a time machine. I can't sleep let's run away and don't ever look back, don't ever look back.

Make it like your birthday everyday. I'm not sticking around to watch you go down. Uh-huh, I see you. For you I'll risk it all, all. I’m gon’ put her in a coma. She ride me like a roller coaster. You hear my voice, you hear that sound. 'Cause I will love you unconditionally (oh yeah). They say, be afraid you're not like the others, futuristic lover. There is no fear now, let go and just be free, I will love you unconditionally.

We can dance, until we die, you and I, will be young forever. Pop your Pérignon. Last Friday night, yeah I think we broke the law, always say we're gonna stop. Don't need apologies. Give you something good to celebrate. But don’t make me your enemy, your enemy, your enemy. Flowers in her hair, she don't care. Tone, tan fit and ready, turn it up cause its gettin' heavy.

Sass

Variables

$modal-inner-padding:               $spacer;

$modal-footer-margin-between:       .5rem;

$modal-dialog-margin:               .5rem;
$modal-dialog-margin-y-sm-up:       1.75rem;

$modal-title-line-height:           $line-height-base;

$modal-content-color:               null;
$modal-content-bg:                  $white;
$modal-content-border-color:        rgba($black, .2);
$modal-content-border-width:        $border-width;
$modal-content-border-radius:       $border-radius-lg;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs:       $box-shadow-sm;
$modal-content-box-shadow-sm-up:    $box-shadow;

$modal-backdrop-bg:                 $black;
$modal-backdrop-opacity:            .5;
$modal-header-border-color:         $border-color;
$modal-footer-border-color:         $modal-header-border-color;
$modal-header-border-width:         $modal-content-border-width;
$modal-footer-border-width:         $modal-header-border-width;
$modal-header-padding-y:            $modal-inner-padding;
$modal-header-padding-x:            $modal-inner-padding;
$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility

$modal-sm:                          300px;
$modal-md:                          500px;
$modal-lg:                          800px;
$modal-xl:                          1140px;

$modal-fade-transform:              translate(0, -50px);
$modal-show-transform:              none;
$modal-transition:                  transform .3s ease-out;
$modal-scale-transform:             scale(1.02);

Loop

Responsive fullscreen modals are generated via the $breakpoints map and a loop in scss/_modal.scss.

@each $breakpoint in map-keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
$postfix: if($infix != "", $infix + "-down", "");

@include media-breakpoint-down($breakpoint) {
.modal-fullscreen#{$postfix} {
width: 100vw;
max-width: none;
height: 100%;
margin: 0;

.modal-content {
  height: 100%;
  border: 0;
  @include border-radius(0);
}

.modal-header {
  @include border-radius(0);
}

.modal-body {
  overflow-y: auto;
}

.modal-footer {
  @include border-radius(0);
}
}
}
}

用法

互動視窗插件透過數據屬性或JavaScript切換您隱藏的內容。它將.modal-open加到body以復寫預設的滾動行為，并生成一個.modal-backdrop來提供點擊區域，以便在點擊動態視窗外面時移除顯示的動態視窗。

通過數據屬性

啟動一個動態視窗而無需編寫JavaScript。在控制元素上（如按鈕）設置data-bs-toggle=“modal”，以及一個data-bs-target=“#foo”或href=“#foo”來指定特定的動態視窗進行切換。

<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>

通過JavaScript

用一行JavaScript創建一個互動視窗：

var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)

選項

可以透過數據屬性或JavaScript傳遞選項。對于數據屬性，將選項名稱附加到data-bs，如data-bs-backdrop=“”。

Name	Type	Default	Description
`backdrop`	boolean or the string `'static'`	`true`	包括模態背景元素?；蛘?，為不在單擊時關閉模式的背景指定static。
`keyboard`	boolean	`true`	按escape鍵時關閉模式
`focus`	boolean	`true`	初始化時將焦點放在模態上。

方法

異步方法和轉換

所有API方法都是異步的，并開始轉換。轉換一開始就返回到調用方，但在轉換結束之前返回。此外，對轉換組件的方法調用將被忽略。有關更多信息，請參閱我們的JavaScript文檔。

傳遞選項

將你的內容啟用為互動視窗，接受一個選擇性的object選項。

var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
})

切換

手動切換動態視窗。在動態視窗實際顯示或隱藏之前返回給調用者（即在shown.bs.modal或hidden.bs.modal事件發生之前）。

myModal.toggle()

顯示

手動打開動態視窗。在動態視窗實際顯示之前返回給調用者（即在shown.bs.modal事件發生之前）。

myModal.show()

Also, you can pass a DOM element as an argument that can be received in the modal events (as the relatedTarget property).

var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)

隱藏

手動隱藏動態視窗。在動態視窗實際隱藏之前返回給調用者（即在hidden.bs.modal事件發生之前）。

myModal.hide()

手動更新

如果動態視窗在打開狀態（比如在出現卷軸的情況下）高度改變，則重新調整動態視窗的位置。

myModal.handleUpdate()

銷毀

銷毀一個元素的Modal。（刪除DOM元素上儲存的數據）

myModal.dispose()

獲取實例

靜態方法，可以讓你獲取與DOM元素相關聯的互動視窗實例。

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

事件

Bootstrap的model class也有提供一些用于model功能的事件，所有相關事件都在Model本身被觸發（在

）。

Event type	Description
`show.bs.modal`	當呼叫show實例方法時，此事件會立即觸發。如果是由點擊事件觸發，被點擊的元素可作為事件的relatedTarget屬性。
`shown.bs.modal`	當呼動視窗顯示時將會觸發此事件（等待CSS轉換完成）。如果是由點擊事件觸發，被點擊的元素可作為事件的relatedTarget屬性.
`hide.bs.modal`	當呼叫hide實例方法時，將會立即觸發此事件。
`hidden.bs.modal`	當互動視窗隱藏后將會觸發此事件（等CSS轉換完成）。
`hidePrevented.bs.modal`	當顯示互動視窗后將會觸發此事件，其背景是static的，model以外的點擊或按下esc會被鍵盤選項、data-bs-keyboard設置為false。

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