以前は、ブートストラップタブの使用について説明していました。今日は、ブートストラップでのモデルポップアップウィンドウの使用について学びます。
効果：
コード：
<入力ID = "btntext" type = "button" value = "text component" data-toggle = "modal" data-target = "＃mymodal" href = "../ sysmanage/zujianmanage.aspx"/> <！ - modal-> <div id = "mymodal" tabindex = "-1" "> <dividex =" data-dismiss = "modal">×</button> <h3 id = "mymodallabel">モーダルヘッダー</h3> </div> <div> </div>
とても簡単です、それだけです。
注：データターゲットプロパティはモデルのIDを指しているため、ボタンをクリックするとモデルがポップアップします。
もちろん、JSを使用して制御することもできます。
次のコード：
show：$（ '＃mymodal'）。modal（ 'show'）;
非表示：$（ '＃mymodal'）。モーダル（ 'hide'）;
switch：$（ '＃mymodal'）。modal（ 'toogle'）;
イベント：$（ '＃mymodal'）。
注：ここでは、HREF属性を使用しました。これは、モデルをリモートA URLにすることです。もちろん、あなたが望むものをモデルボディに直接書くことができます。
モデルのDIV構造を慎重に見ると、モデルボディがコンテンツを表し、モデルヘッダーがヘッダーであることを理解できます。したがって、下部に2つのボタンを追加する場合は、次のコードを使用する必要があります。
<div> <a href = "＃"> close </a> <a href = "＃"> save </a> </div>
注：モデルの幅を設定する場合は、レイアウトを追加する必要があります。モデルを下のコードブロックに配置し、モデルの幅を設定することです。 style = "width：500px"。ちなみに、スパンスタイルを使用してクラスに配置することはできません。 。
<div> </div>
上記は、編集者が紹介したブートストラップモデルポップアップボックスの使用です。私はそれが誰にでも役立つことを願っています！