Show Modal Dialog implementation using JQuery

I need to open a page as a Modal Dialog using Jquery .For Example: I have 2 pages say, Parent.aspx & Child.开发者_运维技巧aspx, I need to open child.aspx in a modal dialog using JQuery when i click on a button/link in the parent.aspx. Also Postback can happen in the parent and child pages.

function test(){
    openShadowBox("http://www.google.com", 400, 600, 'my google');
}
function openShadowBox(url, height, width, title){
    width = parseInt(width)+60;
    var horizontalPadding = 30;
    var verticalPadding = 30;
    $('<iframe id="cdt_shadowbox" src="' + url + '" frameBorder="0"/>').dialog({
        title: (title) ? title : 'CDT Shadowbox',
        autoOpen: true,
        width: width,
        height: height,
        modal: true,
        resizable: true,
        autoResize: false,
        closeOnEscape: true,
        //position: 'top',
        overlay: {
            opacity: 0.5,
            background: "black"
        }
    }).width(width - horizontalPadding).height(height - verticalPadding);
    $('html, body').scrollTop(0);  
}

I think the most easiest way is to use iframe in you dialog pointing to Child.aspx.

JQuery has a number of options for creating a Modal "popup" with a page, but as I read your question I think you want to open a page in a separate browser window with a modal relationship to the original page. Javascript (Jquery) allows for Window.Open. This opens your second page in a new window,however, it does not create a modal relationship, nor (I believe) can it.

There are a number of jquery plugins to work with modal dialogs, for instance:

http://plugins.jquery.com/project/modaldialog

Depending on the user experience you're looking for, you'll probably either want an iframe in the modal dialog or perhaps an ajax call to fetch the content and load it into the dialog.

You can either use an iFrame or an UpdatePanel.

A modal dialog is really no different than any other page element. What makes it appear to be "modal" is simply CSS and nothing more.

The one difficulty you make have with ASP.NET and jQuery, though, is that ASP.NET needs everything to be inside it's single form tag. Since jQuery isn't designed specifically for ASP.NET it (and its plugins) may or may not know (or care) about this.

For example if you use simplemodal it has an option to specify where on the form the dialog is appended, you can use this to ensure it's inside #aspnetform and everything it it should work just like any other page element.