'Back' button to previous Modal Popup (Ajax Modal Popup Extender)

0
votes

I have a button on my Default.aspx which launches a 'Terms and Condtions' modal pop up window (popup1). I then have a button on the modal popup which launches another modal popup (popup2) over the top (page 2 of my terms and conditions).

I want to add a back button to modalpopup2 which closes popup2 and shows modalpopup1 so the user has the 'forward/back' option from popup2.

I've added 'ButtonBack' and tried...

protected void ButtonBack_Click(object sender, EventArgs e)
{

    Popup1.Show();
}

But this just redirects back to my default.aspx. Any ideas on how to get around this with C# or maybe some javascript?

Thanks

2
c#javascriptasp.nethtml

2 Answers

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

Thanks for all your help!

Here's my final script...

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