jquery - JQUERY:バックグラウンドレイヤーを作成し、新しいhtmlをフォアグラウンドにロードする方法は? （モーダルフォームのような）

Question

画面を埋めるためにオーバーラップ/オーバーレイレイヤーを作成する最良の方法を見つけようとしています..そして、いくつかのhtmlでロード時に上に新しいレイヤーを作成します...

// Show popup - somehting like this..
$("#myBtn").click(function() {
    $("#myDiv").load("myHTMLcode.html");
});

そして、それを削除する方法が必要です

どんなアイデアでも、これを行う簡単な方法はありますか?フォームを表示するのではなく、html にロードしたいことを除いて、モーダルフォームに似ています..

Answer 1

次のプラグインの 1 つまたは複数のソースを見てください。それらは、あなたが話していることをさまざまな方法で実装しているため、いくつかのアイデアを得る必要があります。それが失敗した場合は、1 つを選択して使用することができます。

• ブロックUI
• シックボックス
• フェイスボックス
• ファンシーボックス

Answer 2

jQuery UIのダイアログウィジェットを使用してこれを行うことができると確信しています。open イベント ハンドラー フックを使用して、ダイアログが開かれたときに HTML をダイアログ コンテナーにドロップする方法を提供します。

$('#dialogDiv').dialog({
    modal: true,
    autoOpen: false,
    buttons: { "Ok": function() { $(this).dialog("close"); },
    open: function(event,ui) {
             $(ui).find('#container').load( ... );
          }
});

$('#openButton').click( function() {
   $('#dialogdDiv').dialog('open');
});

URL を提供する必要がある場合は、使用を検討してください。data()

$('#openButton').click( function() {
   $('#dialogdDiv').data('url','someurl').dialog('open');
});

open: function(event,ui) {
         $(ui).find('#container').load( $('#dialogDiv').data('url') );
      }

Answer 3

$("#myDiv").html('');