I was able to solve my problem, and I'll tell you how.
First of all, this method will change the contents of an overlay's div using a jQuery AJAX method. It will not open a 2nd overlay. I found opening a 2nd overlay to be impractical.
This method follows the
Loading external pages into overlay technique.
index.html
<div class="overlay" id="overlay>
<div class="contentWrap"></div>
</div>
<a href="join.html" rel="#overlay">Show Overlay</a>
index.html's javascript
<script>
$(document).ready(function() {
$("a[rel]").overlay({
expose: {
color: '#333',
loadSpeed: 200,
opacity: 0.9
},
onBeforeLoad: function(){
var wrap = this.getContent().find("div.contentWrap");
wrap.load(this.getTrigger().attr("href"));
}
});
$("#changeText").live('click', function(){
var url = $(this).attr("href");
$("#content").load(url, {var1:Math.random()*99999});
$.scrollTo("0%", 400);
return false;
});
});
</script>
join.html
<html>
<head></head>
<body>
<div class="content" id="content">
This is the content of the overlay.
<a href="rules.html" id="changeText">Change Overlay</a>
</div>
</body>
</html>
So what we have here is all of the javascript being contained on the
index.html page. When we click on Show Overlay, the overlay will appear and load
join.html.
join.html has the link
Change Overlay. When that is clicked, this function located in
index.html will fire:
$("#changeText").live('click', function(){
var url = $(this).attr("href");
$("#content").load(url, {var1:Math.random()*99999});
$('html,body').animate({scrollTop: 10}, 1000, 'swing');
return false;
});
This block of code will grab the
href value from the link marked with the id
changeText. Then it will call the jQuery function
load on the div we want to change. In this case, we want to change the contents of the div marked with the id
content. The var1:Math.random()*99999 parameter exists to prevent Internet Explorer from caching the resulting page, which can cause problems during development. You can read about that if you look up the load function in the jQuery documentation.
This will result in your overlay's content in changing.
