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

【问题标题】：Close a ModalPopupExtender control from another aspx page从另一个 aspx 页面关闭 ModalPopupExtender 控件
【发布时间】：2021-10-05 16:42:26
【问题描述】：

当用户单击 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>

【问题讨论】：

标签： asp.net iframe modalpopupextender

【解决方案1】：

问题在于 iFrame。通常情况下，您无法控制其他网页，从那时起，当您访问我的网站时，我会查看您是否说打开了其他网页 - 比如说您的银行业务？嘿，让我的网站抓住它？？真的？？？

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

jQuery.UI 对话框更好，因为该 jQquery 对话框可以“注入”和“拉”到页面上的 div 以显示 OTHER 页面所以，你可以，可以，可以弹出另一个页面，但你不能正在使用 iFrame，因此您可以简单地将一些代码添加到将关闭和关闭对话框的按钮。

所以，我的建议是使用 jQuery.UI 对话框。毫无疑问，你有 jQuery，所以你必须添加 jQuery.UI。由于 jQuery.UI 库和 ajax 弹出窗口在很大程度上做同样的事情，所以我尝试采用 ONE 库，我不喜欢有多个库做几乎相同的事情。

转储 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 将整个其他页面转换为弹出对话框 - 甚至带有标题等。

【讨论】：