このレッスンでは、主にブートストラップのモーダルボックスプラグインについて学びます。これは、インタラクティブなWebサイト向けの非常に一般的なポップアップ機能プラグインです。
Bootstrap Modal Boxプラグインの詳細については、学習するための特別なトピック「Bootstrap Modal Usage Tutorial」をクリックしてください。私はあなたがそれを気に入っていることを願っていますので、以下を続けてください
1つ。基本的な使用
モーダルボックスを使用したポップアップコンポーネントには、3層のdivコンテナ要素、すなわちモーダル（モーダル宣言レイヤー）が必要です。
ダイアログ（ウィンドウ宣言レイヤー）、コンテンツ（コンテンツレイヤー）。コンテンツレイヤーには、ヘッダー、ボディ、フッターの3つのレイヤーがあります。
//基本的な例
<！ - モーダル宣言、show Display-> <div tabindex = "-1"> <！ - window宣言 - > <div> <！ - コンテンツ宣言 - > <div> <！ - ヘッダー - > <div> <ボタンタイプ= "ボタン" data-dismiss = "Modal"> <span>×</span </<メンバーは一時的にメンバーにログインできません</p> </div> <！ - footnote-> <div> <button = "button">登録</button> <button type = "button"> login </button> </div> </div> </div> </div> </div> </div> </div>
モーダルボックスを自動的に非表示にしてから、ボタンをクリックしてポップアップする場合は、次の操作を実行する必要があります。
//モーダルボックスのショーを削除してID <div id = "mymodal"> //を追加してモーダルボックスをクリックして<ボタンdata-toggle = "modal" data-target = "＃mymodal">をクリックします> //ポップアップウィンドウの3つのサイズがあります。 <div id = "mymodal"> //メインボディのグリッドシステムで流体を使用します<！ - 本体 - > <div> div> div> div> <div> 1 </div> <div> </div> <div> 1 </div>
二。使用手順
基本的な使用法の導入後、プラグインのさまざまな重要な用途を見てみましょう。すべてのプラグインは、JavaScript/jQueryに基づいています。次に、4つの要素があります：使用法、パラメーター、メソッド、イベント。
1。使用法
最初のタイプ：データ属性に渡すことができます
// data-toggredata-toggle = "modal" data-target = "＃mymodal"
データトグルは、トリガータイプを示します
データターゲットは、トリガーされたノードを示します
<button>が使用していないが、<a>を使用している場合、データターゲットはhref = "＃mymodal"も使用できます。
交換する。もちろん、データターゲットを使用することをお勧めします。 2つの宣言された属性、データトグとデータターゲットに加えて、いくつかのオプションがあります。
2。パラメーター
効果は、HTML要素にデータ - *属性宣言を設定することで制御できます。
//白い背景とクリックしてdata-backdrop = "false"を閉じない// escを押してdata-keyboard = "false"を閉じないようにします。ボタンクリックがトリガーされている場合、最初のクリックは表示されず、2回目に表示されます。 data-show = "false" // index.htmlをコンテナに1回ロードhref = "index.html"
もちろん、JavaScriptで直接設定することもできます。
// jquery.modal（{show：true、backdrop：false、keyboard：false、remote： 'index.html'、}）;3。メソッド
デフォルトでポップアップウィンドウが表示されていない場合、前後にポップアップウィンドウをクリックするにはどうすればよいですか？
//クリックしてポップアップウィンドウ$（ '＃btn'）を表示します。
4。イベント
モーダルボックスは、ポップアップの前、ポップアップ後、閉じる前、閉じた後の4種類の時間をサポートします。
$（ '＃myModal'）。表示！ '）;}）; $（'＃myModal '）。表示！ '）;}）; $（'＃myModal '）。
この一連のチュートリアルは、Bootstrap Basic Tutorials Special Topics、Click to Learnのようにコンパイルされています。
それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
上記はこの記事に関するものです。すべての人の学習に役立つことを願っています。