“返回”按钮到上一个模态弹出窗口（Ajax Modal Popup Extender）

Question

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

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

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

protected void ButtonBack_Click(object sender, EventArgs e)
{

    Popup1.Show();
}

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

谢谢

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

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