從另一個 aspx 頁面關閉 ModalPopupExtender 控件

Question

當用戶單擊 page1.aspx 中的超鏈接時，我想彈出一個 aspx 頁面（page2.aspx），如下所示。 它正確地出來了。 現在我想關閉彈出頁面 (page2.aspx) 或當用戶點擊 page2.aspx 中的取消按鈕 (ButtonCancel) 時關閉 ModalPopupExtender。 我怎樣才能做到這一點？

我知道用戶可以使用 ModalPopupExtender 的“CancelControlID”屬性關閉它。 但是不知道在新的 aspx 頁面上處理它。

頁面1.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> 

頁面2.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

問題是 iFrame。 作為正常規則，您無法控制其他網頁，從那時起，當您來到我的網站時，我會看看您是否說打開了任何其他網頁 - 比如說那個做您的銀行業務的網頁？ 嘿，讓我的網站抓住那個？？ 真的？？？

我使用了 AjaxPopup，但現在已經過渡到 jQuery.UI。 而你的問題正是原因所在。

jQuery.UI 對話框更好，因為 jQquery 對話框可以“注入”和“拉”到頁面上的 div 中以顯示其他頁面 所以，您可以，可以，可以彈出其他頁面，但您沒有使用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 將整個其他頁面轉換為彈出對話框 - 即使帶有標題等。