OKボタンまたはX（閉じる）をクリックした後にJQueryダイアログコンテンツを削除するにはどうすればよいですか？

Question

私はダイアログボックスを作成するJQuery関数を作成しました。 HTMLコンテンツ、タイトル、幅、高さなどの関数で渡すことのできる引数はほとんどありません。私は、OKボタンかXボタンをクリックすると、画面の後ろで何が起こっているのかをもっと見始めました。ダイアログボックスがdisplay:noneに設定されていることがわかります。すべてのコンテンツは画面に残ります。ダイアログボックスを呼び出す次の関数をクリックすると、新しいHTMLコンテンツが作成されていることがわかります。一度閉じたダイアログボックスのコンテストをどのようにクリアすることができるのだろうか？ここでは、ダイアログボックスのための私の機能は次のとおりです。ここで

$.extend({ 
    alert: function (message, title, height, width, print) { 
     var dialogButtons = { 
      "Ok": function() { 
       $(this).remove(); 
      } 
     }; 

     if (print) dialogButtons.Print = function() { 
      $(this).dialog().printArea(); 
     }; 

     $("<div></div>").dialog({ 
      buttons: dialogButtons, 
      close: function (event, ui) { $(this).hide(); }, 
      resizable: false, 
      title: title, 
      modal: true, 
      width: height, 
      height: width, 
      overflow:"auto", 
      position: { 
        my: "center", 
        at: "center", 
        of: window 
      } 
     }).html(message); 
    } 
}); 

は、私は、この関数を呼び出す方法の例です：

私は、ダイアログボックスを閉じた後、私はこのコンテンツをご覧スクリーンの背後に

<div id="container"> 
    Some HTML 
</div> 

//Call that creates dialog box 
var divID = $('#container').show(); 
$.alert(divID,'Form Input',800,600); 

：

<div style="height: auto; width: 600px; top: 0px; left: 655.8px; z-index: 101; display: none;" tabindex="-1" role="dialog" class="ui-dialog ui-corner-all ui-widget ui-widget-content ui-front ui-dialog-buttons ui-draggable" aria-describedby="ui-id-1" aria-labelledby="ui-id-2"><div class="ui-dialog-titlebar ui-corner-all ui-widget-header ui-helper-clearfix ui-draggable-handle"><span id="ui-id-2" class="ui-dialog-title">Form Input</span><button type="button" class="ui-button ui-corner-all ui-widget ui-button-icon-only ui-dialog-titlebar-close" title="Close"><span class="ui-button-icon ui-icon ui-icon-closethick"></span><span class="ui-button-icon-space"> </span>Close</button></div><div id="ui-id-1" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 0px; max-height: none; height: 468px; display: none;"></div><div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"><div class="ui-dialog-buttonset"><button type="button" class="ui-button ui-corner-all ui-widget">Ok</button></div></div></div> 

ここをクリックして、ダイアログボックスを開くボタンをもう一度クリックします。

<div style="height: auto; width: 600px; top: 0px; left: 655.8px; z-index: 101;" tabindex="-1" role="dialog" class="ui-dialog ui-corner-all ui-widget ui-widget-content ui-front ui-dialog-buttons ui-draggable" aria-describedby="ui-id-9" aria-labelledby="ui-id-10"><div class="ui-dialog-titlebar ui-corner-all ui-widget-header ui-helper-clearfix ui-draggable-handle"><span id="ui-id-10" class="ui-dialog-title">Form Input</span><button type="button" class="ui-button ui-corner-all ui-widget ui-button-icon-only ui-dialog-titlebar-close" title="Close"><span class="ui-button-icon ui-icon ui-icon-closethick"></span><span class="ui-button-icon-space"> </span>Close</button></div><div id="ui-id-9" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 0px; max-height: none; height: 468px;"><div id="container" style="display: block;"> 
</div></div><div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"><div class="ui-dialog-buttonset"><button type="button" class="ui-button ui-corner-all ui-widget">Ok</button></div></div></div> 

ダイアログボックスで新しいhtmlを作成し、表示する前に設定する通常の方法ですか：なしまたは私の機能にバグがありますか？

Answer 1

これを解決する一般的な方法は、HTMLにDIVを追加して、新しいDIVを動的に構築する代わりにそれを使用することです。そのCSSはdisplay: none;なので、ダイアログを表示するまで表示されません。

これができない場合は、変数にDIVを保存して再利用できます。

次に、使用していない間は、$(this).dialog("close")を使用して非表示にしてください。ダイアログを閉じると、デフォルトの動作であるため、

var dialogDiv; 
$.extend({ 
    alert: function (message, title, height, width, print) { 
     var dialogButtons = { 
      "Ok": function() { 
       $(this).dialog("close"); 
      } 
     }; 

     if (print) dialogButtons.Print = function() { 
      $(this).dialog().printArea(); 
     }; 

     if (!dialogDiv) { 
      dialogDiv = $("<div>"); 
     } 
     dialogDiv.dialog({ 
      buttons: dialogButtons, 
      resizable: false, 
      title: title, 
      modal: true, 
      width: height, 
      height: width, 
      overflow:"auto", 
      position: { 
        my: "center", 
        at: "center", 
        of: window 
      } 
     }).html(message); 
    } 
}); 

は、あなたのclose:オプションは必要ありません。

DEMO