モーダルボックス(モーダル)は、親フォームにオーバーレイされる子フォームです。通常、目的は別のソースからコンテンツを表示することです。これは、親フォームを離れることなく相互作用することができます。サブフォームは、情報、相互作用などを提供できます。
プラグインの機能を個別に参照する場合は、modal.jsを参照する必要があります。または、bootstrapプラグインの概要章で述べたように、bootstrap.jsまたはbootstrap.min.jsの圧縮バージョンを参照できます。
1。使用法
モーダルボックス(モーダル)プラグインの隠された内容を切り替えることができます。
データ属性を介して:属性データ-toggle = "modal"をコントローラー要素(ボタンやリンクなど)に設定し、データ= "#識別子"またはhref = "#識別子を設定して、特定のモーダルボックスを指定して(ID ="識別子 ")。
JavaScript:この手法を使用して、JavaScriptの単純なラインを使用してID = "識別子"のモーダルボックスを呼び出すことができます。
$( '#識別子')。modal(options)
2。簡単な例
div id = "mymodal"> <div> <ボタンタイプ= "ボタン" data-dismiss = "modal"> x </button> <h3>ダイヤルボックスタイトル</h3> </div> <div> <p> div> <div> <p> div> <a href = "#"# "data-dismiss =" modal "> cancel </a <a href ="# "#" data-dismiss = "modal">確認</a> </div> </div>
モーダルダイアログは、ボタンまたはリンクを使用して直接呼び出すことができます。これは単純な使用法です。
コードを次のようにコピーします。
さらに、ダイアログボックスにフォームデータを開くたびにフォームデータをクリアする必要がある場合、次のように:
コードコピーは次のとおりです。$( '#modal1')。modal( 'hide');
$( "#modal1")。 //契約を追加した後、フォーム操作をクリアします
それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
上記はこの記事に関するものです。すべての人の学習に役立つことを願っています。