如何使用 Jquery 在弹出窗口/模式中仅显示页面的一部分？

Question

我是 Jquery 的新手，我在一个 drupal 站点中使用它。 我使用 jqModal 显示“弹出”或“模态”，使用 ajax 从我的站点加载另一个页面： 让我们这样说：

$(document).ready(function() {
      $('#dialog').jqm({ajax: '@href',modal:true, trigger: 'a.trigger'});
      $("a.trigger").click(function() {
        $('#dialog').jqmShow();
      });
    });

使用这样的 html：

<a href="examples/examplepage.html" class="trigger">View</a>
<div class="jqmWindow" id="dialog">
  <a href="#" class="jqmClose">Close</a>
  Please wait... <img src="inc/busy.gif" alt="loading" />
</div>

问题是examplepage.html的某些部分（我真的不想修改它，因为它是一个可以通过其他方式访问的动态页面）不需要显示；例如，我不需要将侧面的菜单等添加到弹出窗口中，而只需要页面的主要内容。

似乎我在这里的帖子中读到 iframe 这显然是一种解决方案，现在已弃用.那么是否有可能以某种方式仅显示 div 内容或使用 jqmodal 将“只是页面的这一部分”告知弹出/模式的任何其他方式？甚至是另一个 jquery 插件？

谢谢，

Answer 1

您可以修改 examplepage 以便它接受一个 URL 参数，这将导致某些元素不显示。

或者，如果 jqModal 提供了一种方法来指定在 AJAX 请求完成后执行的回调，您可以使用 javascript 来删除页面的不同部分。 （此方法可能会导致使用较慢计算机/浏览器的用户暂时看到页面的这些部分。）

Answer 2

$.load 可以选择仅加载选定的 div。

$('#result').load('ajax/test.html #container');

来自jquery 页面

Answer 3

我研究了source for jQModal，看起来它只是在内部使用了jQuery 的.load。由于您可以将选择器附加到 URL 以提取要显示的页面片段，因此您应该能够简单地执行此操作：

$('#dialog').jqm({ajax: 'ajax-url #desired-box-selector',modal:true, trigger: 'a.trigger'});

当然，缺点是，除非您修改 jqModal，否则您将无法使用 @href 快​​捷方式，因为它可能不会保留添加的选择器。不过，解决这个问题非常简单。