0

我有一个包含活动 X 控件的 html 页面。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>

我想在一个对话框中显示它，这很可能是图像： 测试

所以我选择jquery-ui来实现它。编码：

 $('#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');
 }

它不工作。演示在jsfiddle。

4

2 回答 2

1

您要确保提供给对话框的 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');
 }

有关工作示例，请参阅此jsFiddle 。

于 2013-07-01T17:24:55.150 回答
0

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

首先，当您需要在字符串中插入引号时，您需要使用转义字符。（即 \" 将在字符串中存储为 "）。其次，我将函数移动到点击事件内部。请查看下面的代码。

希望这可以帮助。

$('#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
         });
于 2013-07-01T17:35:03.727 回答