javascript - Show Modal Dialog implementation using JQuery - Stack Overflow

admin管理员组

文章数量:1025202

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.

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.

• javascript
• jquery
• asp
• vb

Share Improve this question Follow asked Apr 22, 2011 at 12:41 skamaleskamale 67344 gold badges1616 silver badges2828 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 1

function test(){
    openShadowBox("http://www.google.", 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./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.

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.

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.

• javascript
• jquery
• asp
• vb

Share Improve this question Follow asked Apr 22, 2011 at 12:41 skamaleskamale 67344 gold badges1616 silver badges2828 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 1

function test(){
    openShadowBox("http://www.google.", 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./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.

本文标签： javascriptShow Modal Dialog implementation using JQueryStack Overflow