Modal popup does not work

Question

Code from my panel:

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

Answer 1

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

Since 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, the UpdatePanel this as ChildrenAsTriggers="true" and UpdateMode="Conditional", to allow a conditional update of this area.

Another point to note, is how btnOpen is out of an Updatepanel, it is necessary to inform the ID of it 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;
}