Overlay just a part of an external page with jquery

Posted by rolando on Stack Overflow See other posts from Stack Overflow or by rolando
Published on 2010-03-08T14:58:44Z Indexed on 2010/03/08 15:06 UTC
Read the original article Hit count: 485

Filed under:
|

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.

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about overlay