从另一个 aspx 页面关闭 ModalPopupExtender 控件

Close a ModalPopupExtender control from another aspx page

我想在用户单击来自 page1.aspx 的超链接时弹出一个 aspx 页面 (page2.aspx) 我做了如下。它正确地出来了。现在我想关闭弹出页面 (page2.aspx) 或当用户单击 page2.aspx 中的取消按钮 (ButtonCancel) 时关闭 ModalPopupExtender。我怎样才能做到这一点?

我知道用户可以使用 ModalPopupExtender 的 'CancelControlID' 属性 关闭它。但是不知道如何在新的 aspx 页面上处理它。

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>

问题出在 iFrame 上。通常,您无法控制其他网页,从那时起,当您访问我的网站时,我会查看您是否说打开了任何其他网页 - 比如您的银行业务?嘿,让我的网站抓住那个?真的吗???

我使用了 AjaxPopup,但现在已经过渡到 jQuery.UI。你的问题就是原因。

jQuery.UI 对话框更好,因为 jQquery 对话框可以“注入”和“拉”到您页面上的 div 中以显示其他页面 所以,您可以,可以,可以弹出另一个页面向上,但您没有使用 iFrame,因此您可以简单地向按钮添加一些代码,该按钮将关闭和关闭对话框。

所以,我的建议是使用 jQuery.UI 对话框。您无疑拥有 jQuery,因此您将不得不添加 jQuery.UI。由于 jQuery.UI 库和 ajax 弹出窗口做同样的事情,所以我尝试采用一个库,我不喜欢有多个库做几乎相同的事情。

转储 iFrame 以完成这项工作已经是很好的一步了。

加载另一个页面的 jQuery.UI 看起来像这样:

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

因此,上面会将页面弹出到 div 并显示它。 为了结束它,我们可以解散:

                        mydiv.dialog('close');

那么,在这种情况下我的另一个页面呢?网格视图 (HotefilterGrid.aspx).

所以它看起来像这样:

因此,jQuery.UI 将整个其他页面转换为弹出对话框 - 甚至带有标题等。