Modal popup does not work

Question

Modal popup does not work

Navigation

#1 by (2 votes)

0

My panel code:

<div class="modal">
         <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:Panel ID="Panel1" runat="server"   >

        <asp:Button ID="btnClose" runat="server" Text="Close" />
    </asp:Panel>
 </div>

Css:

.modal {
position: fixed;
width: 300px;
height: 100px;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
margin: auto;
background-color: white;
box-shadow: 0px 0px 10px black;

}

Code-behind:

Panel1.Visible= true;

But nothing happens.

asp.net webforms

asked by anonymous 24.02.2015 / 15:13

1 answer

Bootstrap alignment is not correct Pass ID by parameter in modal window

score 2 · Accepted Answer

In this case, the modal should be inside the Panel.

As you have a ScriptManager on the page, I advise you to use UpdatePanel to decrease the data flow in the Application.

Note that the example below, UpdatePanel is like ChildrenAsTriggers="true" and UpdateMode="Conditional" , to enable an update of this area conditionally.

Another point to note is how btnOpen is outside of an UpdatePanel, it is necessary to enter its ID as Trigger.

Design

<asp:ScriptManager ID="smScriptManager" runat="server">
    <Scripts>

    </Scripts>
</asp:ScriptManager>
<asp:Button ID="btnOpen" runat="server" Text="Open" OnClick="btnOpen_Click" />    
<asp:UpdatePanel ID="upModal" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:Panel ID="pModal" runat="server" Visible="false" >
            <div class="modal-bg"></div>
            <div class="modal">
                <asp:Button ID="btnClose" runat="server" Text="Close" OnClick="btnClose_Click" />
            </div>
        </asp:Panel>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="btnOpen" EventName="Click" />
    </Triggers>
</asp:UpdatePanel>

Code-Behind

protected void btnClose_Click(object sender, EventArgs e)
{
    this.pModal.Visible = false;
    this.upModal.Update();
}

protected void btnOpen_Click(object sender, EventArgs e)
{
    this.pModal.Visible = true;
    this.upModal.Update();
}

CSS

.modal {
    position: fixed;
    width: 300px;
    height: 100px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    margin: auto;
    background-color: white;
    box-shadow: 0px 0px 10px black;
}

.modal-bg {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    margin: auto;
    background-color: gainsboro;
    opacity: 0.7;
}