View on GitHub

Modal (モーダル)

モーダルでは, JavaScript modal プラグインを使用して, ライトボックス, 通知, カスタムダイアログを作成できます。モーダルの使い方の例を示します。

On this page

How it works

Bootstrapのモーダルコンポーネントを使い始める前に、メニューオプションが変更されたので、以下を読んでください。

モーダルは HTML、CSS、JavaScript で構築されます。モーダルはドキュメント内の他のすべてのものの上に配置され、<body> からスクロールを取り除き、モーダルのコンテンツがスクロールするようにします。
モーダルの「背景」をクリックすると、自動的にモーダルが閉じます。
Bootstrapは、一度に1つのモーダルウィンドウしかサポートしていません。ネスト(入れ子)になったモーダルはユーザーエクスペリエンスが低いと考えられるためサポートされていません。
モーダルは position: fixed を使用します。可能な限り、他の要素との干渉を避けるために、モーダルHTMLをトップレベルの位置に配置してください。別の固定要素の中に .modal を入れ子にすると、問題が発生する可能性があります。
繰り返しになりますが、position: fixedのため、モバイルデバイスでモーダルを使用する際にはいくつかの注意点があります。詳細は See our browser support docs を参照してください。
HTML5がそのセマンティクスを定義する方法のため, the autofocus HTML attribute はBootstrapのモーダルでは効果がありません。同じ効果を得るためには、いくつかのカスタムJavaScriptを使用してください。

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

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

The animation effect of this component is dependent on the prefers-reduced-motion media query. See the reduced motion section of our accessibility documentation.

デモと使用ガイドラインについては、引き続きお読みください。

Examples

以下は static モーダルの例です (つまり、position と display がオーバーライドされていることを意味します)。これには、モーダルヘッダ、モーダルボディ(padding のために必要)、モーダルフッタ(オプション)が含まれています。可能な限り、モーダルヘッダを dismiss アクションと一緒に含めるか、別の明示的な dismiss アクションを提供するようにお願いします。

<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>

Live demo

下のボタンをクリックして、モーダルデモをトグルします。ページの上からスライドダウンしてフェードインします。

<!-- 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>

Static backdrop

バックドロップを静的に設定していると、その外側をクリックしてもモーダルが閉じません。下のボタンをクリックして試してみてください。

<!-- 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>

Scrolling long content

モーダルがユーザーのビューポートやデバイスに対して長すぎると、ページ自体から独立してスクロールします。以下のデモを試してみてください。

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 を追加することで、モーダル本体をスクロールできるスクロール可能なモーダルを作成することもできます。

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>

Vertically centered

モーダルを垂直方向に中央に配置するために .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 and popovers

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>

Using the grid

.modal-body の中に .container-fluid を入れ子にすることで、モーダル内のグリッドシステムを利用します。

<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-* attributes を使用してください。

以下は、HTMLとJavaScriptの例に続くライブデモです。relatedTarget の詳細は read the modal events docs を参考にしてください。

<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
})

Change animation

変数 $modal-fade-transform はモーダルフェードインアニメーションの前の .modal-dialog のトランスフォーム状態を決定し、変数 $modal-show-transform はモーダルフェードインアニメーションの終了時の .modal-dialog のトランスフォーム状態を決定します。

例えばズームインアニメーションを作りたい場合は、$modal-fade-transform: scale(.8)を設定します。

Remove animation

フェードインして表示するのではなく、単に表示するだけのモーダルの場合は、.fade クラスを削除します。

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

Dynamic heights

モーダルの高さが開いている間に変更された場合は、スクロールバーが表示されたときのモーダルの位置を再調整するために myModal.handleUpdate() を呼び出す必要があります。

Accessibility

必ず .modal にモーダルのタイトルを参照する aria-labelledby="...." を追加してください。さらに、.modal に aria-describedby を追加することで、モーダルダイアログの説明を与えることができます。JavaScriptで既に追加しているので、role="dialog"を追加する必要はありません。

Embedding YouTube videos

YouTubeの動画をモーダルに埋め込むには、BootstrapにはないJavaScriptを追加して自動で再生を停止させるなどの工夫が必要です。詳しくは、See this helpful Stack Overflow post を参照にしてください。

Optional sizes

モーダルには3つのオプションのサイズがあり、.modal-dialog に配置することができます。これらのサイズは、狭いビューポートでの水平スクロールバーを避けるために、特定のブレークポイントで有効になります。

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.

Usage

モーダルプラグインは、データ属性やJavaScriptを使って、必要に応じて隠しコンテンツを切り替えます。また、デフォルトのスクロール動作を上書きするために .modal-open を <body> に追加し、モーダルの外側をクリックしたときに表示されたモーダルを削除するためのクリック領域を提供するために .modal-backdrop を生成します。

Via data attributes

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>

Via JavaScript

JavaScript 1行でモーダルを作成します。

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

Options

オプションは、データ属性またはJavaScriptで渡すことができます。データ属性の場合は、data-bs-backdrop="" のように data-bs- にオプション名を追加します。

Name	Type	Default	Description
`backdrop`	boolean or the string `'static'`	`true`	Includes a modal-backdrop element. Alternatively, specify `static` for a backdrop which doesn't close the modal on click.
`keyboard`	boolean	`true`	Closes the modal when escape key is pressed
`focus`	boolean	`true`	Puts the focus on the modal when initialized.

Methods

Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

See our JavaScript documentation for more information.

Passing options

モーダルとしてコンテンツをアクティブにします。オプションの object を受け取ります。

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

toggle

モーダルを手動で切り替えます。モーダルが実際に表示または非表示になる前に呼び出し元に戻ります (shown.bs.modal または hidden.bs.modal イベントが発生する前)。

myModal.toggle()

show

手動でモーダルを開きます。モーダルが実際に表示される前に呼び出し元に戻ります (shown.bs.modal イベントが発生する前)。

myModal.show()

hide

手動でモーダルを非表示にします。モーダルが実際に隠される前に呼び出し元に戻ります **** (hidden.bs.modal イベントが発生する前)。****

myModal.hide()

handleUpdate

開いている間にモーダルの高さが変化した場合、モーダルの位置を手動で再調整します（スクロールバーが表示されている場合など）。

myModal.handleUpdate()

dispose

モーダル要素を破棄します。

myModal.dispose()

getInstance

DOM 要素に関連付けられたモーダルインスタンスを取得できるようにする Static メソッドです。

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

Events

Bootstrapのモーダルクラスは、モーダル機能にフックするためのいくつかのイベントがあります。すべてのモーダルイベントは、モーダル自体（つまり、<div class="modal">）で発生します。

Event type	Description
`show.bs.modal`	This event fires immediately when the `show` instance method is called. If caused by a click, the clicked element is available as the `relatedTarget` property of the event.
`shown.bs.modal`	This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the `relatedTarget` property of the event.
`hide.bs.modal`	This event is fired immediately when the `hide` instance method has been called.
`hidden.bs.modal`	This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
`hidePrevented.bs.modal`	This event is fired when the modal is shown, its backdrop is `static` and a click outside the modal or an escape key press is performed with the keyboard option or `data-bs-keyboard` set to `false`.

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