Jquery 使html元素显示在对话框中的步骤

我有一个html页面，其中包含一个活动的X控件。html代码是：

<div class="esv">
    <h2>John 3:16 <object class="audio" data=
    "http://www.esvapi.org/assets/play.swf?myUrl=hw%2F43003016" height="12"
    type="application/x-shockwave-flash" width="40">
        <param name="movie" value=
        "http://www.esvapi.org/assets/play.swf?myUrl=hw%2F43003016">
        <param name="wmode" value="transparent">
    </object></h2>

    <div class="esv-text">
        <h3 id="p43003016.01-1">For God So Loved the World</h3>

        <p id="p43003016.07-1"><span class="verse-num woc" id=
        "v43003016-1">16&nbsp;</span><span class="woc">“For God so loved the
        world,<span class="footnote">&nbsp; <a href="#f1" id="b1" title=
        "Or 'For this is how God loved the world'">[1]</a></span> that he gave
        his only Son, that whoever believes in him should not perish but have
        eternal life.</span> (<a class="copyright" href=
        "http://www.esv.org">ESV</a>)</p>
    </div>

    <div class="footnotes">
        <h3>Footnotes</h3>

        <p><span class="footnote"><a href="#b1" id="f1">[1]</a></span>
        <span class="footnote-ref">3:16</span> Or <em>For this is how God loved
        the world</em></p>
    </div>
</div>

我想将其显示在一个对话框中，该对话框可能如图所示：

所以我选择jQueryUI来实现它。守则：

 $('#btn1').click(myFunction);
 $('#res1').dialog({
     autoOpen: true,
     resizable: false,
     position: 'center',
     stack: true,
     height: 'auto',
     width: 'auto',
     modal: true
 });

 function myFunction() {
     var s = "<div class="esv"><h2>John 3:16 <object type="application/x-shockwave-flash"  data="http://www.esvapi.org/assets/play.swf?myUrl=hw%2F43003016" width="40" height="12" class="audio"><param name="movie" value="http://www.esvapi.org/assets/play.swf?myUrl=hw%2F43003016" /><param name="wmode" value="transparent" /></object></h2>
  <div class="esv-text"><h3 id="p43003016.01-1">For God So Loved the World</h3>
  <p id="p43003016.07-1"><span class="verse-num woc" id="v43003016-1">16&nbsp;</span><span class="woc">&#8220;For God so loved the world,<span class="footnote">&nbsp;<a href="#f1" id="b1" title="Or 'For this is how God loved the world'">[1]</a></span> that he gave his only Son, that whoever believes in him should not perish but have eternal life.</span>  (<a href="http://www.esv.org" class="copyright">ESV</a>)</p>
    </div>
    <div class="footnotes">
    <h3>Footnotes</h3>
    <p><span class="footnote"><a href="#b1" id="f1">[1]</a></span> <span class="footnote-ref">3:16</span> Or <em>For this is how God loved the world</em>
   </p>
   </div>
 </div>";
     $('#res1').html(s).dialog('open');
 }

---

它不起作用。演示位于

您要确保提供给对话框的html有效，即没有相互冲突的引号。原则上是这样的：

 $('#btn1').click(myFunction);
 $('#res1').dialog({
     autoOpen: true,
     resizable: false,
     position: 'center',
     stack: true,
     height: 'auto',
     width: 'auto',
     modal: true
 });

 function myFunction() {
     var htmlString = 'foo';
     $('#res1').html(htmlString).dialog('open');
 }

---

请参阅此示例。

我查看了您的示例，发现了一些错误

首先，任何时候需要在字符串中插入引号时，都需要使用转义字符。i、 e.\将作为存储在字符串中。其次，我将函数移动到click事件内部。请检查下面的代码

希望这有帮助

$('#btn1').click(function() {
         var s = "<div class=\"esv\"><h2>John 3:16 <object type=\"application/x-shockwave-flash\"  data=\"http://www.esvapi.org/assets/play.swf?myUrl=hw%2F43003016\" width=\"40\" height=\"12\" class=\"audio\"><param name=\"movie\" value=\"http://www.esvapi.org/assets/play.swf?myUrl=hw%2F43003016\" /><param name=\"wmode\" value=\"transparent\" /></object></h2><div class=\"esv-text\"><h3 id=\"p43003016.01-1\">For God So Loved the World</h3><p id=\"p43003016.07-1\"><span class=\"verse-num woc\" id=\"v43003016-1\">16&nbsp;</span><span class=\"woc\">&#8220;For God so loved the world,<span class=\"footnote\">&nbsp;<a href=\"#f1\" id=\"b1\" title=\"Or 'For this is how God loved the world'\">[1]</a></span> that he gave his only Son, that whoever believes in him should not perish but have eternal life.</span>  (<a href=\"http://www.esv.org\" class=\"copyright\">ESV</a>)</p></div><div class=\"footnotes\"><h3>Footnotes</h3><p><span class=\"footnote\"><a href=\"#b1\" id=\"f1\">[1]</a></span> <span class=\"footnote-ref\">3:16</span> Or <em>For this is how God loved the world</em></p></div></div>";

 $('#res1').html(s).dialog('open');
});
$('#res1').dialog({
             autoOpen: true, resizable: false, position: 'center',
             stack: true, height: 'auto', width: 'auto', modal: true
         });

---

这不是有效的代码，您希望得到什么？似乎您有引号问题：var s=John 3除非您将esv量化为“esv”，否则这将不起作用您是说双引号吗？这是服务响应，我无法更改。1。你的报价。你需要修理它们。在初始化对话框中设置autoOpen:false。我是否有机会将数据更改为有效数据？它来自web服务。我定义了var s=blahblah；我的意思是让s有效。如果你控制了Web服务，你能清理它的输出吗？如果没有，您可以获取它返回的任何HTML并对其进行解析，以正确地转义所有单引号和双引号。还有其他方法吗？我无法控制数据。它来自一个外部web服务。我们可以使用windows.openurl而不是dialog吗？