Most of the people facing a problem overlay effect with panel....Here is the solution. This is achieve by using simple css style. Here is the live demo....just click on the Button.



C# Code


protected void can1_Click(object sender, EventArgs e)
{
panel.Visible = false;
}
protected void ClickMe_Click1(object sender, EventArgs e)
{
panel.Visible = true;
}

<asp:Panel runat="server" ID="panel" CssClass="DialogueBackground" Visible="false">
<div class="Dialogue">
<div class="popup">
<asp:Image ID="Image2" runat="server" ImageUrl="~/articles/css tutorials/overlay effect with panel/jasmin.jpg" />
<div class="clear10">
</div>
<asp:Button ID="can1" runat="server" Text="Close" BorderStyle="None" CssClass="btn" OnClick="can1_Click" />
<div class="clr">
</div>
</div>
</div>
</asp:Panel>


div.DialogueBackground
{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #696969;
background-color: rgba(0,0,0,0.6);
overflow: hidden;
text-align: center;
color: #000000;
overflow: hidden;
z-index: 35;
}
div.DialogueBackground div.Dialogue
{
position: fixed;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
color: #000000;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-border-radius: 5px;
}
.popup
{
padding: 2px;
margin: 5px auto 0px auto;
border: 6px solid #333333;
-webkit-border-radius: 5px;
-moz-border-border-radius: 5px;*/
background: #000000;
font-family: 'Trebuchet MS'; /* center it ? */
z-index: 99999;
}

ABOUT

aspxtemplates.com is a place to find the best Bootstrap Templates for your desktop, mobile phone or tablet. We make it easy to discover, share and download High Quality Templates Free.