CODEWITHSUNDEEP
javascriptjqueryasp.netvb.net
skamale
skamale

Reputation: 673

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.

Upvotes: 1

Views: 10218

Answers (5)

Jamie Treworgy
Jamie Treworgy

Reputation: 24344

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.

Upvotes: 0

ChrisThompson
ChrisThompson

Reputation: 2008

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);  
}

Upvotes: 1

James Montagne
James Montagne

Reputation: 78770

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.

Upvotes: 0

Cos Callis
Cos Callis

Reputation: 5084

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.

Upvotes: 0

Restuta
Restuta

Reputation: 5903

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

Upvotes: 0

Related Questions