Overlay just a part of an external page with jquery
- by rolando
Hi,
How can i load a part of an external page with jquery overlay?
I have an aspx call TipoFactor.aspx wich has a div inside a contentplaceholder like this:
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<br />
<div id="DivGeneral" runat="server" class="tablaPaddingFiveCeleste">
as you can see the "DivGeneral" is the one i want to load into the overlay, wich is defined like this:
<a href="TipoFactorSeleccion.aspx" rel="#overlay">
<button type="button">
Pagina Externa</button>
</a>
<!-- overlayed element -->
<div class="apple_overlay" id="overlay">
<!-- the external content is loaded inside this tag -->
<div class="contentWrap">
</div>
</div>
<script type="text/javascript">
$(function() {
// if the function argument is given to overlay,
// it is assumed to be the onBeforeLoad event listener
$("a[rel]").overlay({
expose: 'darkred',
effect: 'apple',
onBeforeLoad: function() {
// grab wrapper element inside content
var wrap = this.getContent().find(".contentWrap");
// load the page specified in the trigger
wrap.load(this.getTrigger().attr("href"));
}
});
});
</script>
As it is now its loading the entire page into the overlay and that's not good for me cause it inherites from the same masterpage as the other. I need to keep that masterpage because it has some important aplication functionality.
What can I do ?
Thank you very much.
