Open aspx page as a modal popup

Question

I have a grid with edit option ,and on edit button click i need to redirect to an edit page . the requirement is to get this edit page as a popup with background (prev page) greyed out.

i tried modal popup, but the controls are on a separate page .

i tried modal popup with panel and a Iframe : this works..but thean another problem arises.i need to close the page on 'SAVE' or 'Cancel' butotn click .these controls would be on the edit page and not on the prev page .any help is appreciated .

Thanks Rajat

why you creating an aspx page ... use a custom control, place all you grid/buttons in that and call this control using a modal popup ... — Safran Ali, Aug 04 '11 at 12:32
:) design ...also we are using separate view \ interface \ presenter — Rajat banerjee, Aug 04 '11 at 12:34

score 5 · Answer 1 · edited May 23 '17 at 10:30

i'll strongly suggest to use user control as it'll be more handy for you to manage and there is no point creating a whole page for it bcz modal popup uses ajax request and if you try to load the page in it then you have to do form post ... which doesn't go along either use ajax request or form post back ...

plus i was looking for the answer of ur question and i came across this article where it says:

You May use Modal Popup Extender to open some part of the page as Popup. But there we don't have any property to open other html or aspx page in Popup window.

http://wiki.asp.net/page.aspx/1378/open-different-page-using-ajax-modal-popup-extender-control/

and also found people asking same question as you did and the response they got is here

use Iframe or user control

Is there a way to open another page using ModalPopup Extender?

and i'll suggest to modify your design as it doesn't do any harm, instead it'll be much more helpful ...

hope this help ...

score 2 · Answer 2 · answered Sep 27 '18 at 08:10

If you are using bootstrap Modal then you can add an iframe into the modal body and load the url of your page inside it.

<div class="modal fade" id="modalC" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">Cantidad reservas mensuales</h4>
            </div>
            <div class="modal-body" id="content">
                <iframe src="your new page url">
            </div>
        </div>
    </div>
</div>

score 2 · Answer 3 · answered Aug 04 '11 at 12:32

2

I've used the Modal Popup Control from the AJAX Control Toolkit several times with good success: http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/ModalPopup/ModalPopup.aspx

answered Aug 04 '11 at 12:32

Graham

3,217
1
27
29

true....but the problem is after i have pop'ed up. the issue is with closing the popup using a button click on the popup itself...it becomes more complex ..as the controls in the popup are not on that page...but a separate page. – Rajat banerjee Aug 04 '11 at 12:36

score 1 · Answer 4 · edited Jun 25 '14 at 13:21

Just an idea but what about using the jquery "contents()" function?

You could set an interval to look for an element within the iframe from the parent page. (You're using .net so you could make it appear upon postback on the iframe's page).

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="test.aspx.vb" Inherits="admin_test" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>    
    <script>
        $(function () {

            var watchForClose = setInterval(function () {
                if ($('#testIframe').contents().find('#closeModal').length > 0) {
                    clearInterval(watchForClose);
                    /* call function to close modal here..*/
                    alert('Close modal');
                };
            }, 100);

        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <iframe id="testIframe" src="Default.aspx" width="300" height="300"></iframe>
    </div>
    </form>
</body>
</html>

The above is looking for an element within the iframe-page with an id of "closeModal". When that element appears you can make a call to the modal's close function, (just replace the alert with the call).

score 0 · Accepted Answer · answered Mar 20 '14 at 16:05

We can open an aspx as popup using IFrame as follows,

First take a button and provide onclick event as follows

   <input id="btnSymbol" type="button" value="..." onclick="OpenMyPopUp()" runat="server"/>

Next In the page provide a "Div" tag with id as follows

   <div id="MyDialog">
        </div>

Then find below the two methods which take the present URL and opens a aspx page in a popup using IFRAME

    function OpenMyPopUp(){openPopup('OpenPage.aspx', 530, 800, 'Page Title');}

The Four parameters are sent as follows URL,height,width,title

   function openPopup(url, h, w, t) {
if (url != null && h != null && w != null && t != null) {

    urlBase = location.href.substring(0, location.href.lastIndexOf("/") + 1);
    url = urlBase + url;
    $('#MyDialog').html('<iframe border=0 width="100%" height ="100%" src="' + url + '"> </iframe>');
    $("#MyDialog").dialog({
        title: t,
        modal: true,
        autoOpen: true,
        height: h,
        width: w,
        resizable: false,
        position: ['right-10', 'top+30'],
        closeOnEscape: false,
        dialogClass: "alert"
    });
}}

Open aspx page as a modal popup

5 Answers5