前に、ブートストラップ タブの使用法を説明しました。今日はブートストラップでのモデル ポップアップ ウィンドウの使用法について学びます。
効果:
コード:
1 2 3 4 5 6 7 8 |
|
とても簡単です、それだけです。
注: data-target 属性はモデルの ID を指しているため、ボタンをクリックするとモデルがポップアップ表示されます。
もちろん、js を使用して制御することもできます。
次のコード:
表示: $('#myModal').modal('show');
非表示: $('#myModal').modal('hide');
スイッチ: $('#myModal').modal('toogle');
イベント: $('#myModal').on('hidden', function () {// do something…});
注: ここでは、モデルをリモート URL に移動させるために href 属性を使用しました。もちろん、モデル本体に直接必要な内容を記述することもできます。
モデルの div 構造をよく見ると、model-body がコンテンツを表し、model-header がヘッダーを表すことがわかります。下部に 2 つのボタンを追加したい場合は、次のようにする必要があります。コード。
1 2 3 4 |
|
注: モデルの幅を設定したい場合は、レイアウトを追加する必要があります。以下のコードブロックにモデルを配置し、モデルの幅を設定するだけです。 style="width:500px" ちなみに、span styleを使用してクラスに直接入れることはできません。 。
1 |
|
以上は編集者が紹介したBootStrapモデルのポップアップボックスの使い方です。皆さんの参考になれば幸いです。