CODEWITHSUNDEEP
asp.netmodality
Rajat banerjee
Rajat banerjee

Reputation: 1821

Open aspx page as a modal popup

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

Upvotes: 0

Views: 35225

Answers (5)

Malik Zahid
Malik Zahid

Reputation: 745

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>

Upvotes: 2

Oppdal
Oppdal

Reputation: 611

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).

Upvotes: 1

Deepak Kothari
Deepak Kothari

Reputation: 1753

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

Upvotes: 0

Safran Ali
Safran Ali

Reputation: 4497

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 ...

Upvotes: 5

GHP
GHP

Reputation: 3231

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

Upvotes: 2

Related Questions