モーダルのサンプル

オプションの使用例

解説はこちら。

起動用の <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" ボタンを押してもモーダルは開かないので、もう一度ボタンを押すこと。