Close a ModalPopupExtender control from another aspx page

Question

I want to popup an aspx page (page2.aspx) when user click on a hyperlink from page1.aspx I have done like below. And it is coming out correctly. Now I want to close the popup page(page2.aspx) or want to close the ModalPopupExtender when user clicks on a Cancel button (ButtonCancel) from page2.aspx. How can I achieve this?

I know that user can close it using the 'CancelControlID' property of ModalPopupExtender. But dont have idea about handling it on a from a new aspx page.

page1.aspx

    <asp:LinkButton   ID="linkbtn_show"   runat="server" >
              Add New</asp:LinkButton>
                
                  <cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panl1" TargetControlID="linkbtn_show" BackgroundCssClass="Background">  
</cc1:ModalPopupExtender>  
<asp:Panel ID="Panl1" runat="server" CssClass="Popup" align="center" style = "display:none">  
    <iframe  style=" width: 550px; height: 550px;" src="page2.aspx" id="irm1" runat="server"></iframe>  
</asp:Panel> 

Page2.aspx

<table style="width:100%;height:100%">
            <tr>
                  <td align="center" ><br/>
                    <asp:TextBox ID="tb_staffname" runat="server"></asp:TextBox>
                </td>
            </tr>
   <tr><td align="center">  <asp:Button ID="ButtonOK" runat="server" Text="Update" />
                    <asp:Button ID="ButtonCancel" runat="server" Text="Cancel" /></td></tr>
        
        </table>

Answer 1

The problem is the iFrame. As a normal rule, you can't control other web pages, since then when you come to my site, I would look to see if you have say any other web pages open - like say the one doing your banking? Hey, let my site grab that?? Really???

I used the AjaxPopup, but now have transited over to jQuery.UI. And your problem was quite much the reason.

jQuery.UI dialogs are better, since that jQquery dialog can "inject" and "pull" into a div on your page to display the OTHER page So, you would, could, can pop that other page up, but you NOT be using a iFrame, and thus you can simple add some code to a button that will close and dismiss the dialog.

So, my recommend is to use a jQuery.UI dialog. You no doubt have jQuery, so you WILL have to add jQuery.UI. Since the jQuery.UI library and the ajax popup quite much do the same thing, then I try to adopt ONE library, and I don't like having multiple libraries that do ALMOST the same thing.

Dumping the iFrame to make this work is already a good step.

the jQuery.UI to load anohter page thus looks like this:

  <div id="poppagearea">

   </div>
  
<script>

  function showpage() {
            var mydiv = $('#poppagearea');
            mydiv.dialog({
                autoOpen: false, modal: true, title: 'My cool other page', width: '30%',
                position: { my: 'top', at: 'top+150' },
                buttons: {
                    'ok': function () {
                     mydiv.dialog('close');
                     alert('user click ok');
                    },
                    'cancel': function () {
                        mydiv.dialog('close');
                        alert('user click cancel');
                    }
                }
            });
            mydiv.load('HotelFilterGrid.aspx');
            // Open the dialog
            mydiv.dialog('open');

  </script>

So, above will pop the page into that div, and display it. And to close that, we can dismiss with:

                        mydiv.dialog('close');

So, my other page in this case? a gridview (HotefilterGrid.aspx).

So it looks like this:

So, jQuery.UI converted the WHOLE other page into a popup dialog - even with a title etc.