Hi @Sharma
You can achieve this by using Ajax ModelPopupExtender.
Refer this code
CSS
<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;
width: 300px;
height: 250px;
text-align:left;
}
.popupheader
{
height: 40px;
background-color: #5151FF;
color: White;
font-family: 'Times New Roman' , Times, serif;
font-size: x-large;
font-weight: bold;
padding-left:20px;
}
.style1
{
width: 100%;
}
</style>
HTML
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<br />
<asp:Button ID="btnlogin" runat="server" Text="Login" />
<asp:ModalPopupExtender ID="btnlogin_ModalPopupExtender" runat="server"
DynamicServicePath="" Enabled="True" TargetControlID="btnlogin" PopupControlID="Panel1" BackgroundCssClass="modalBackground" CancelControlID="btncancel"></asp:ModalPopupExtender>
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup">
<div class="popupheader">Login Here
</div><br /><br />
<table class="style1">
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="User Name"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server" Width="180px"></asp:TextBox>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label2" runat="server" Text="Password"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server" TextMode="Password" Width="180px"></asp:TextBox>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<asp:Button ID="Button1" runat="server" Text="Login" ToolTip=" " />
<asp:Button ID="btncancel" runat="server" Text="Cancel" />
</td>
</tr>
</table>
</asp:Panel>
</div>
Happy Coding