jQueryのUI：私は次のコードを持っている唯一のjQuery

Question

を使用してダイアログを作成します。私は何をしたいか

<div id="leaving-dialog" title="Confirmation Required"> 
    <p>You are now leaving the ****** section of ******</p> 
</div> 

jQuery(document).ready(function ($) 
    { 
     $("#leaving-dialog").dialog({ 
      autoOpen: false, 
      modal: true, 
      width: 480, 
      height: 240, 
      resizable: false, 
      draggable: false, 
      zIndex: 9999999999 
     }); 

     $(".leaving-section").click(function (event) { 
      event.preventDefault(); 
      var targetUrl = $(this).attr("href"); 

      $("#leaving-dialog").dialog({ 
       buttons: { 
        "No, I want to stay here": function() { 
         $(this).dialog("close"); 
        }, 
        "Yes, that's okay": function() { 
         //window.location.href = targetUrl; 
         window.open(targetUrl); 
         $(this).dialog("close"); 
        } 
       } 
      }); 
      $("#leaving-dialog").dialog("open"); 
     }); 
    }); 

することは、それがDOMに純粋にクライアント側を作成していますので、jQueryのコードにHTMLを移動しています。おそらくそれを変数に格納していますか？

おかげ

Answer 1

$(function(){ 

    var dialog = '<div id="leaving-dialog" title="Confirmation Required"><p>You are now leaving the ****** section of ******</p></div>'; 

    $('body').append(dialog); 

    $("#leaving-dialog").dialog({...}); 

}); 

Answer 2

は

<div id="leaving-dialog" title="Confirmation Required"> 
    <p>You are now leaving the ****** section of ******</p> 
</div> 

を削除し、あなたの関数内にこれを追加し

jQuery(document).ready(function ($) 
{ 
$('body').append('<div id="leaving-dialog" title="Confirmation Required"><p>You are now leaving the ****** section of ******</p></div>'); 
[...] 
}); 

Answer 3

を呼び出しますが、このような任意のドキュメントに生のHTMLを追加することができます

$('<div id="leaving-dialog" title="Confirmation Required"> <p>You are now leaving the ****** section of ******</p></div>').appendTo('body'); 

出典：http://api.jquery.com/jQuery/#jQuery2