Open & Then Close Modal Popups In Code

I have a button within a panel which is displayed in a modal popup.

What I am trying to do is when a user clicks the button it closes the current Modal Popup and opens a new one.

I've tried this which sort of works


    Protected Sub SignLink_Click(sender As Object, e As System.EventArgs)

        LoginExtender.Hide()

        SignUpExtender.Show()
    End Sub

Open in new window


When I say sort of works I mean that when I click the button the current modal does close but the new one does not open. However, when i click on the button to fire the original modal again I can see both modal popups.

Confusing?!
EdAsked:
Who is Participating?
 
Rajar AhmedConnect With a Mentor ConsultantCommented:
pls check , whether you are following like below approach.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="modalTwoOpenClose.aspx.vb" Inherits="JsJquery_modalTwoOpenClose" %>

<%@ Register
    Assembly="AjaxControlToolkit"
    Namespace="AjaxControlToolkit"
    TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
    .modalBackground
    {
        background-color: Black;
        filter: alpha(opacity=90);
        opacity: 0.8;
    }
    .modalPopup
    {
        background-color: #FFFFFF;
        border-width: 3px;
        border-style: solid;
        border-color: black;
        padding-top: 10px;
        padding-left: 10px;
        width: 300px;
        height: 140px;
    }
</style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    
    <div>
        
        <asp:Button ID="Button1" runat="server" Text="Open Login Extendor" /><br />
        <asp:Label ID="UploadStatusLabel" runat="server"></asp:Label><br />
        <asp:HiddenField ID="dum" runat="server" />
        
<cc1:ModalPopupExtender ID="LoginExtender" runat="server" PopupControlID="Panel1" TargetControlID="dum"
     BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<cc1:ModalPopupExtender ID="SignUpExtender" runat="server" PopupControlID="Panel2" TargetControlID="dum"
     BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>

<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" align="center" style = "display:none">
   Login Extendor
    <asp:Button ID="btnClose" runat="server" Text="Open Sign up " />
</asp:Panel>
<asp:Panel ID="Panel2" runat="server" CssClass="modalPopup" align="center" style = "display:none">
   Signup Extendor
</asp:Panel>
    </div>
    </form>
</body>
</html>

Open in new window

Codebehind..
Partial Class JsJquery_modalTwoOpenClose
    Inherits System.Web.UI.Page

    Protected Sub btnClose_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnClose.Click
        LoginExtender.Hide()
        SignUpExtender.Show()
    End Sub

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
        LoginExtender.Show()
    End Sub
End Class

Open in new window


Meeran03
0
 
LIONKINGCommented:
Do you want the first Modal form to close? Or do you want to keep it "alive" when you show the "new" modal form?
0
 
EdAuthor Commented:
yes, i want the first modal to close and the 2nd one to open with a click of 1 button.
0
 
LIONKINGCommented:
If you want it to close first, you should program a me.Close() in the Click event of the button.

Once the form is closed the main program (which opened the first modal form) will continue to run. Here you can open your second modal form.

If you want to open the second form "only" if the user clicks a button (i.e. not if he clicks the red X to close the form) you can create a private variable in the modal form, and a property and check it in the main program.

Something like:
In modalForm1:

Private boolButtonClicked as Boolean=False

Public ReadOnly Property ButtonClicked() As Boolean

Get
    Return boolButtonClicked
End Get

End Property

In modalForm1, when Button clicked
buttonClicked=True
Me.Close()

In the main program
myModalForm1.ShowModal() ' <<-- Shows the first modal form
if myModal.ButtonClicked then ' <<-- Checks if the user clicked the button
   myModalForm2.ShowModal()
end if

Hope it helps.
0
 
LIONKINGCommented:
Terribly sorry... I thought this was winForms...
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.