ブートストラップモーダルボックスの使い方

ブートストラップ モーダル ボックスの使用方法: まずファイルをインポートし、ブートストラップ モーダル スタイルを本文領域に適用します。次に、コンテンツ領域をモーダル スタイル div に配置し、コンテンツ領域のスタイルを [モーダル] に設定します。 -コンテンツ] 。

#この記事の動作環境: Windows 7 システム、bootstrapv4.4.1 バージョン、Dell G3 コンピューター。

推奨: ブートストラップ ビデオ チュートリアル

ブートストラップ モーダル ボックスの使用方法:

1 , 以下の図に示すように、まず必要なライブラリ ファイルを HTML でインポートします。必ず jquery ファイル

2 をインポートしてから、ブートストラップ モーダル スタイルを適用しました。以下の図に示すように、本文領域を指定します。

3. 次に、コンテンツ領域をモーダル スタイル div に配置します。コンテンツ領域のスタイルは modal-content です。 , 以下の図に示すように、

4. 次に、コンテンツ領域の 3 つのスタイル、先頭と末尾、および中間部分を見てみましょう。下の図

5. 次にボタンを定義します。ボタンをクリックすると、下の図に示すようにボックスが表示されます

6. 以下の図に示すように、ボタンの data-target 属性を指定する必要があることに注意してください。

7.プログラムを実行すると、下の図に示すような内容が表示されます。これがモーダル ボックスです。

以上がブートストラップモーダルボックスの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。