如何创建一个 JQuery UI 对话框来显示 HTML 代码片段？答案

【问题标题】：How to create a JQuery UI Dialog to display a HTML code snippet?如何创建一个 JQuery UI 对话框来显示 HTML 代码片段？
【发布时间】：2012-01-27 13:29:58
【问题描述】：

通常，JQuery 对话框显示的文本被放入隐藏的div，然后使用$("#cs0").dialog(); 调用。

但是，如果要显示的文本是 HTML 代码，例如：

  <div id="cs0">
    <a href="http://www.mysite.com/">
      <img border="0" alt="MySite" src="http://www.mysite.com/images/buttons/mybutton.jpg" />
    </a>
  </div>

对话框不会按字面意思显示。如何让对话框显式显示div 内容，而不是其执行？

见：http://jsfiddle.net/DqgGH/2/

附言

我试过了：

$("<div><a href="http://www.mysite.com/"><img border="0" alt="Convert-Kit" src="http://www.mysite.com/images/buttons/mybutton.jpg" /></a></div>").dialog();

但它不起作用！！！

【问题讨论】：

标签： jquery html jquery-ui-dialog code-snippets

【解决方案1】：

将其输出为原始 HTML 的一种方法是使用 text() 设置 div 的内容。

HTML：

<div id="il0">MyButton</div>

<div id="cs0"></div>

Javascript：

$('#cs0').hide();

$('#il0').click(function() {
    $('#cs0').text('<a href="http://www.mysite.com/"><img border="0" alt="MySite" src="http://www.mysite.com/images/buttons/mybutton.jpg" /></a>').dialog();
});

【讨论】：