在简单模式窗口内运行 Javascript

Question

我正在尝试将脚本添加到模态 (simplemodal) jquery 插件，但它们不会运行，在模式中运行时此功能是否根本不可用，或者我是否遗漏了某些内容。

这是我调用 simplemodal 的方式：

$('#modal').modal({
  onClose: function (dialog) {
    $App.setLocation('#/');
    $.modal.close();
  }
});

这是模态的 html，其中包括 addthis 脚本（我已经取出了要在此处发布的真实用户名）：

<div class="article clearfix">
  <div class="article-post">
    <h2 class="title">{{header}}</h2>
    <p class="date">Posted in {{feed_source}}, {{date}}</p>
    <ul class="tags clearfix">
      <li><a href="#">tag 1</a></li>
      <li><a href="#">tag 2</a></li>
    </ul>
    <div class="body">
      {{{body}}}
    </div>
  </div>
  <div id="single-article-comments" class="article-comments">
    <h3 class="comments-header">Comments:</h3>
  </div>
</div>
<div class="sidebar clearfix">
  <div class="sidebar-inner">
    <p class="sidebar-logo">Logo Text</p>
    <ul class="sidebar-menu">
      <li><a href="#single-article-comments" class="sidebar-comment tooltip" title="Comment on this article">Comment</a></li>
      <li><a href="#/rate/{{id}}" title="Rate" class="sidebar-rate tooltip">Rate</a></li>
      <li><a href="#/slate/{{id}}" title="Slate" class="sidebar-slate tooltip">Slate</a></li>
      <li><a href="#/report/{{id}}" title="Report Abuse / Flag as Inappropriate" class="sidebar-report tooltip">Report</a></li>
      <li><a href="#" title="Email">Email</a></li>
      <li><a href="#" title="Tweet">Tweet</a></li>
      <li><a href="#" title="Facebook Like">Like</a></li>
    </ul>
    <ul class="sidebar-action-addthis addthis_toolbox addthis_default_style" addthis:url="http://www.allaboutmidleton.ie/#/article/{article_id}" addthis:title="Tweet by {user}" addthis:description="{tweet}">
      <li><a href="http://www.addthis.com/bookmark.php" class="tooltip addthis_button_email" title="Email to a Friend"><img src="/assets/img/ico-email.png" width="26" height="23" border="0" alt="Email" /></a></li>
      <li><a class="addthis_button_tweet"></a></li>
      <li><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a></li>
    </ul>
    <!-- AddThis Button BEGIN -->
    <script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
    <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=username"></script>
    <!-- AddThis Button END -->
    <div class="sidebar-ads">
      <ul class="advertising-ad-list">
        <li><a href="" class="ad">Advertisement</a></li>
        <li><a href="" class="ad">Advertisement</a></li>
        <li><a href="" class="ad">Advertisement</a></li>
      </ul>
    </div>
  </div>
</div>

所有这些代码在模态之外都可以正常工作。有谁知道在模式内运行脚本的方法。

谢谢

Answer 1

$App.setLocation('#/'); 在做什么？

我不明白为什么它不起作用，但希望 onClose 回调主要用于关闭动画。

我的建议是使用 onShow 回调并将您自己的函数绑定到“close”事件。例如：

$('#modal').modal({
  onShow: function (dialog) {
    $('.close', dialog.data[0]).click(function () {
      $App.setLocation('#/');
      $.modal.close();
      return false;
    });
  }
});

Answer 2

我愿意相信，SimpleModal 比埃里克·马丁 (Eric Martin) 知道的还要强大。

1. 在主文档中创建模态隐藏 div；
2. 创建您想要在该模式中处理的任何完整 HTML/ASP/JAVASCRIPT 页面；
3. 使用 jquery.load() 使用 HTML/ASP/JAVASCRIPT 页面加载隐藏的 div；
4. 显示模态