jQuery用戶界面：使用創建對話框只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"); 
     }); 
    }); 

我想要做的是移動HTML到jQuery代碼，所以它創造了純粹的客戶端的DOM。也許存儲在一個變量？

感謝

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