Opening additional links within a modal box

[nigassma]

If a user clicks on link "A" and a modal box opens that loads content from another page (page "B") and page "B" has links on it. Is it possible to have those links open within the same modal box?

[nigassma]

Of course it's possible, how else would those lightbox galleries work then, right?

So I guess my question is how do I accomplish this? So far I got the modal window to work with a very simplistic jquery function, but I just need to figure out how to open additional pages within that modal window.

[whoisgregg]

If you put an iframe in that modal window, it magically just takes care of itself. :)

[nigassma]

Can an iframe (damn you apple, I initially typed iFrame) load a specific div, instead of an entire page?

[whoisgregg]

If you are using AJAX to load specific data into a div, then you could just as easily link the different versions inside of an iframe.

var url = '/script_that_outputs_block_of_html.php?section='+current_section;

If you have something like that already, then you could just open an iframe to that same URL.

[nigassma]

Yea I'm using AJAX to load #sub-content off of Page B, but #sub-content contains a sub navigation list that links to page C, D, E and F. I want C-F to open in the same modal without closing the window.

[whoisgregg]

Perhaps you could post a snippet of the code that you use to fetch the first bit of content for the modal dialog and an example of how the links to C-F are formatted? Be sure to remove all site specifics and I'm sure we'll be able to help. :)

[nigassma]

--javascript--
$(document).ready(function() {

//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');

//transition effect
$('#mask').fadeIn(500);
$('#mask').fadeTo("fast",0.6);

//transition effect
$(id).fadeIn(500);

});
//if close button is clicked
$('.window .close').click(function () {
$(this).hide();
$('#dialog').hide();
});

//if dialog is clicked
$('#dialog').click(function () {
$(this).hide();
$('.window').hide();
});

$("#dialog").load("/?page_id=18 #sub-content");
});

--HTML/PHP--
--Initial Modal Page--
<ul class="dropdown">
<li><a href="#dialog" name="modal">Case Studies</a></li>
<li><a href="#">Portfolio</a></li>
</ul>
...
<div id="dialog" class="window"> </div>
--Secondary Page--
<?php get_header(); ?>

<div id="sub-content">
<?php if (have_posts()) : while (have_posts()) : the_post();?>
<?php
if($post->post_parent)
$children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0");
else
$children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
if ($children) { ?>
<ul>
<?php echo $children; ?>
</ul>
<?php } ?>

<div class="post">
<h2 id="post-<?php the_ID(); ?>"><?php the_title();?></h2>
<!-- close button is defined as close class -->
<a href="#" class="close">X Close</a>

<div class="entrytext">
<?php the_content('<p class="serif">Read the rest of this page &raquo;</p>'); ?>
</div>
</div>
<?php endwhile; endif; ?>
<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>

</div>

</div>

<?php get_footer(); ?>

[nigassma]

OK so I ended up trying out FancyBox and am loading an iFrame.

<li><a class="iframe" href="/?page_id=18?iframe">Case Studies</a></li>

If I target a div (#sub-content) I can see the targeted content in the initial iframe but then if I click on one of the links within the iframe, the page refreshes and bye-bye modal window.

<li><a class="iframe" href="/?page_id=18?iframe#sub-content">Case Studies</a></li>

If I leave the link as I pasted it above, the iframe opens the links within the window fine (but the entire page, not the targeted div, obv).

[whoisgregg]

I had no idea jQuery could do this [docs.jquery.com]:

In jQuery 1.2 you can now specify a jQuery selector in the URL. Doing so will filter the incoming HTML document, only injecting the elements that match the selector.

$("#dialog").load("/?page_id=18 #sub-content"); 

Really interesting feature, but it completely changes the nature of advice I would give to you. :)

Typically, AJAX calls are passing a parameter to the script, and the script then only returns the relevant portion:

$("#dialog").load("/?page_id=18&section=sub-content"); 

And, in that situation, your links returned from that script could easily point to:

/?page_id=18&section=main-content
/?page_id=18&section=sidebar

Or even point to other page_id's and, in an iframe, they would "just work." With that jQuery approach where the script itself has no idea how it's being used (or which portions will be used), you'd need to then *use* jQuery to dynamically rewrite the links to have different behaviors. And, skip the whole iframe approach.

I don't use jQuery, I just end up answering lots of questions about it. ;) So, in completely untested code:

$("#dialog").load("/?page_id=18 #sub-content", '', function(){ // callback after page is loaded
$("#dialog a").click( function(){ // attach an onclick event to all the new <a> elements
$("#dialog").load( $(this).href +" #sub-content"); // overwrite the default behavior
return false;
});
});

[nigassma]

This is why I love WebmasterWorld. It was what propelled me through mastering CSS 4 years ago and now over in the javascript forum, the instruction is still there. Thanks for fully explaining the original suggestion and the new one!