Question

我是Jquery的新手，我在drupal网站上使用它。我使用jqModal显示“popup”或“modal”，使用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快捷方式，因为它可能无法保留添加的选择器。但是，解决这个问题非常简单。

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

3 个答案: