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