動作モーダル単一負荷データ

今回はモーダルを操作してデータを一度に読み込む際の注意事項を紹介します。以下は実際のケースですので見てみましょう。

1. ブートストラップ モーダルダイアログと簡単な使い方

 <p id="myModal" class="modal hide fade">
 <p class="modal-header">
 <button type="button" class="close" data-dismiss="modal">x</button>
 <h3>对话框标题</h3>
 </p>
 <p class="modal-body">
 <p>对话框主体</p>
 </p>
 <p class="modal-footer">
 <a href="#" rel="external nofollow" rel="external nofollow" class="btn" data-dismiss="modal">取消</a>
 <a href="#" rel="external nofollow" rel="external nofollow" class="btn btn-primary" data-dismiss="modal">确定</a>
 </p>
</p>

モーダル ダイアログは、 ボタン またはリンクを使用して直接呼び出すことができます。簡単な使用法は次のとおりです:

<button type="button" data-toggle="modal" data-target="#myModal">打开对话框</button>
<a href="#myModal" rel="external nofollow" role="button" class="btn" data-toggle="modal">打开对话框</button>

2. リモート オプションを使用して、モーダル ダイアログにページを .modal-body にロードさせます

リンクを使用する方法とスクリプトを使用する方法の 2 つがあります。

2.1 リンクを使用する

<a href="page.jsp" rel="external nofollow" data-toggle="modal" data-target="#myModal">打开对话框</a>

このリンクをクリックすると、page.jsp の内容がダイアログ ボックスの .modal-body に読み込まれ、ダイアログ ボックスが表示されます。

2.2 スクリプトの使用

$("#myModal").modal({
 remote: "page.jsp"
});

このスクリプトの効果は、リンクを使用する場合と同じです。このスクリプトを実行すると、page.jsp の内容がダイアログ ボックスの .modal-body に読み込まれ、ダイアログ ボックスが表示されます。

これら 2 つのメソッドの背後で、Bootstrap は jQuery のload() メソッドを呼び出して、サーバーから page.jsp を読み込みます。 ページ。ただし、この読み込みは、リンクをクリックしたりスクリプトを何回実行したとしても、変更がリモートに渡されたとしても、一度だけ行われます。 このオプションの値では、ダイアログ ボックスはページをリロードしません。これは本当に頭の痛い問題です。しかし、問題はまだ解決できます。

3. ダイアログボックスが開かれるたびにページをリロードできるようにデータを削除します

検索して関連ドキュメントを調べた結果、ダイアログ ボックスの非表示のイベントに次のステートメントを書き込むだけであることがわかりました:

$("#myModal").on("hidden", function() {
 $(this).removeData("modal");
});

毎回ダイアログ ボックスを開く前にデータを削除することもでき、効果は同じです。

注: 上記のコードは Bootstrap v2 に基づいています。Bootstrap v3 を使用する場合は、モーダル ダイアログ ボックスの HTML とイベントの記述方法が多少異なります。たとえば、上記の非表示イベントの場合、次のように記述する必要があります。

$("#myModal").on("hidden.bs.modal", function() {
 $(this).removeData("bs.modal");
});

この記事の事例を読んだ後は方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

以上が動作モーダル単一負荷データの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。