“返回”按钮到上一个模态弹出窗口（Ajax 模态弹出窗口扩展器）答案

【问题标题】：'Back' button to previous Modal Popup (Ajax Modal Popup Extender)“返回”按钮到上一个模态弹出窗口（Ajax 模态弹出窗口扩展器）
【发布时间】：2013-01-16 11:15:19
【问题描述】：

我的 Default.aspx 上有一个按钮，用于启动“条款和条件”模式弹出窗口 (popup1)。然后，我在模式弹出窗口上有一个按钮，它在顶部启动另一个模式弹出窗口 (popup2)（我的条款和条件的第 2 页）。

我想向 modalpopup2 添加一个后退按钮，该按钮关闭 popup2 并显示 modalpopup1，以便用户从 popup2 获得“前进/后退”选项。

我已经添加了“ButtonBack”并尝试了...

protected void ButtonBack_Click(object sender, EventArgs e)
{

    Popup1.Show();
}

但这只是重定向回我的 default.aspx。关于如何使用 C# 或一些 javascript 解决此问题的任何想法？

谢谢

【问题讨论】：

标签： c# javascript asp.net html

【解决方案1】：

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script type="text/javascript" language="javascript">
        function fn_Next() {
            $find(ModalPopupExtender1).hide();
            $find(ModalPopupExtender2).show();
        }

        function fn_Next1() {
            $find(ModalPopupExtender2).hide();
            $find(ModalPopupExtender3).show();
        }

        function fn_Back() {
            $find(ModalPopupExtender2).hide();
            $find(ModalPopupExtender1).show();
        }

        function fn_Back1() {
            $find(ModalPopupExtender3).hide();
            $find(ModalPopupExtender2).show();
        }
    </script>
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">    

    <script type="text/javascript" language="javascript">
        var ModalPopupExtender1 = '<%= ModalPopupExtender1.ClientID %>';
        var ModalPopupExtender2 = '<%= ModalPopupExtender2.ClientID %>';
        var ModalPopupExtender3 = '<%= ModalPopupExtender3.ClientID %>';
    </script>

    <asp:Button ID="btnShowPopup" Text="Show Popup" runat="server" />
    <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnShowPopup"
        PopupControlID="panelPopup1" BackgroundCssClass="bkgPopup" OkControlID="btnNext" OnOkScript="fn_Next()">
    </asp:ModalPopupExtender>

    <asp:ModalPopupExtender ID="ModalPopupExtender2" runat="server" TargetControlID="panelPopup2"
        PopupControlID="panelPopup2" BackgroundCssClass="bkgPopup" OkControlID="btnBack" OnOkScript="fn_Back()"
            CancelControlID="btnNext1" OnCancelScript="fn_Next1()">
    </asp:ModalPopupExtender>

    <asp:ModalPopupExtender ID="ModalPopupExtender3" runat="server" TargetControlID="panelPopup3"
        PopupControlID="panelPopup3" BackgroundCssClass="bkgPopup" OkControlID="btnBack1" OnOkScript="fn_Back1()">
    </asp:ModalPopupExtender>

    <asp:Panel ID="panelPopup1" runat="server" CssClass="panelPopup">
        <div>
            <table>
                <tr>
                    <td>Popup 1</td>
                </tr>
            </table>            
        </div>
        <div>
            <asp:Button ID="btnNext" runat="server" Text="Next" />
        </div>        
    </asp:Panel>

    <asp:Panel ID="panelPopup2" runat="server" CssClass="panelPopup">
        <div>
            <table>
                <tr>
                    <td>Popup 2</td>
                </tr>
            </table>            
        </div>
        <div>
            <asp:Button ID="btnBack" runat="server" Text="Back" />
            <asp:Button ID="btnNext1" runat="server" Text="Next" />
        </div>        
    </asp:Panel>

    <asp:Panel ID="panelPopup3" runat="server" CssClass="panelPopup">
        <div>
            <table>
                <tr>
                    <td>Popup 3</td>
                </tr>
            </table>            
        </div>
        <div>
            <asp:Button ID="btnBack1" runat="server" Text="Back" />
        </div>        
    </asp:Panel>
</asp:Content>

【讨论】：

太好了，谢谢。这会运行，但在触发我的后退按钮时，它会删除模态背景，但不会删除弹出窗口。我的模式弹出窗口中的内容保存在表格中。 Prehaps这可能会阻止javascript关闭弹出窗口？
好的，我有 3 个模态弹出窗口。这是我的脚本。我可以在 1、2 和 3 之间导航。从 3 返回 2 但不能返回 1？？！
调用 fn_Last() 时无需隐藏已经隐藏的窗口 - 只需隐藏当前窗口即可。

【解决方案2】：

感谢您的帮助！

这是我的最终脚本...

    <script type="text/javascript" language="javascript">
    function fn_Next(sender, args) {
        $find('ModalTerms1').hide();
        $find('ModalTerms2').show();
    }

    function fn_Back(sender, args) {
        $find('ModalTerms2').hide();
        $find('ModalTerms1').show();

}

    function fn_Last(sender, args) {
        $find('ModalTerms3').hide();
        $find('ModalTerms1').hide();
        $find('ModalTerms2').show();
    } 

</script>

【讨论】：