How to display only part of a page in a popup/modal using Jquery?

I am a newbie to Jquery and I am using it in a drupal site. I开发者_运维百科 use jqModal to display a "popup" or "modal" using ajax to load another page from my site: Let's say something like this :

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

with an html like this :

<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>

The problem is that some parts of the examplepage.html (I don't really want to modify it as it's a dynamic page that can be accessed in other ways) don't need to be displayed; for example I don't need the menus on the side etc. into the popup but only the main content of the page.

It seems as I read in posts here that iframe which was apparently a solution is now deprecated. So is it possible somehow to only display a div content or any other manner of telling "just this part of the page" into a popup/modal using jqmodal? or even another jquery plugin?

Thanks,

---

You could modify examplepage so that it accepts a URL parameter which will cause certain elements not to be displayed.

Or, if jqModal provides a way to specify a callback to execute after the AJAX request completes, you could use javascript to remove different parts of the page. (This method will likely result in the users on slower computers/browsers to temporarily see those parts of the page.)

---

$.load has an option to only load a selected div.

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

From the jquery page

---

I dug into the source for jQModal and it looks like it's just using jQuery's .load internally. Since you can append a selector to the URL to extract a piece of the page to display, you should be able to simply do this:

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

The downside is, of course, unless you modify jqModal, you won't be able to use the @href shortcut because it likely won't preserve the added selector. Getting around that is pretty straightforward, though.