Modal PopUp extender is very useful to restrict user to interact with the main page and without leaving the main page we can consider the popup as child page for our necessary requirement....
Design View :-
<head runat="server">
<title></title>
<style type="text/css">
.ModalBackgroundCSS
{
position: absolute;
z-index: 100;
top: 0px;
left: 0px;
background-color: #000;
filter: alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:Button ID="BtnPopUp" runat="server" Text="Open PopUp" OnClick="BtnPopUp_Click" />
</div>
<asp:Panel ID="PanelModalPopUp" BackColor="Aqua" runat="server" Height="150px" Width="500px"
CssClass="ModalPopUpPanel">
<table class="style1">
<tr>
<td style="text-align: right" width="40%">
<asp:Label ID="Label1" runat="server" Text="Name"></asp:Label>
</td>
<td width="60%">
<asp:TextBox ID="TxtName" runat="server" Width="210px"></asp:TextBox>
</td>
</tr>
<tr>
<td style="text-align: right">
<asp:Label ID="Label2" runat="server" Text="Father's Name"></asp:Label>
</td>
<td>
<asp:TextBox ID="TxtFartherName" runat="server" Width="210px"></asp:TextBox>
</td>
</tr>
<tr>
<td style="text-align: right">
<asp:Label ID="Label3" runat="server" Text="Address"></asp:Label>
</td>
<td>
<asp:TextBox ID="TxtAddress" runat="server" Width="210px"></asp:TextBox>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="BtnSave" runat="server" OnClick="BtnSave_Click" Text="Save" Width="61px" />
<asp:Button ID="BtnCancel" runat="server" OnClick="BtnCancel_Click" Text="Cancel" />
</td>
</tr>
</table>
</asp:Panel>
<asp:ModalPopupExtender ID="PanelModalPopUp_ModalPopupExtender" PopupControlID="PanelModalPopUp"
TargetControlID="Button1" CancelControlID="BtnCancel" runat="server" DynamicServicePath=""
Enabled="True" BackgroundCssClass="ModalBackgroundCSS">
</asp:ModalPopupExtender>
<asp:Button ID="Button1" runat="server" Text="extra Button" Style="display: none" />
</form>
</body>
C# Code :-
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Projects_Ajax_ModalPopUpExtender : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void BtnPopUp_Click(object sender, EventArgs e)
{
PanelModalPopUp_ModalPopupExtender.Show();
}
protected void BtnSave_Click(object sender, EventArgs e)
{
//Add Own logic here
}
protected void BtnCancel_Click(object sender, EventArgs e)
{
}
}
No comments:
Post a Comment