メインコンテンツへスキップ

モーダルのサンプル

「HTML」「CSS」「JS」の各タブを押すとコードが記載されているので、それをコピーしてお使い下さい。

オプションの使用例

解説はこちら

起動用の <button> に設定。

backdrop(モーダルの背景をオーバーレイ表示)

data-backdrop="true" デフォルトで設定されているので、あえて設定する必要はない。

See the Pen Bootstrap4のモーダルのdata-backdrop="true"の使用例 by cccabinet (@cccabinet) on CodePen.

data-backdrop="false"

See the Pen Bootstrap4のモーダルのdata-backdrop="false"の使用例 by cccabinet (@cccabinet) on CodePen.

data-backdrop="static"

See the Pen Bootstrap4のモーダルのdata-backdrop="static"の使用例 by cccabinet (@cccabinet) on CodePen.

keyboard(escキーを押すとモーダルを閉じる)

data-keyboard="true" デフォルトで設定されているので、あえて設定する必要はない。

See the Pen Bootstrap4のモーダルのdata-keyboard="true"の使用例 by cccabinet (@cccabinet) on CodePen.

data-keyboard="false"

See the Pen Bootstrap4のモーダルのdata-keyboard="false"の使用例 by cccabinet (@cccabinet) on CodePen.

focus(初期化時にモーダルにフォーカスを移動)

data-focus="true" デフォルトで設定されているので、あえて設定する必要はない。

See the Pen Bootstrap4のモーダルのdata-focus="true"の使用例 by cccabinet (@cccabinet) on CodePen.

data-focus="false" フォーカスはボタンに残る

See the Pen Bootstrap4のモーダルのdata-focus="false"の使用例 by cccabinet (@cccabinet) on CodePen.

show(初期化時にモーダルを表示)

data-show="true" デフォルトで設定されているので、あえて設定する必要はない。
data-show="false" ボタンを押してもモーダルは開かないので、もう一度ボタンを押すこと。