In this article I will explain
How to create AJAX Model Popup Extender in ASP.NET.
First we need to create CSS File.
In this CSS File add below CSS Script. Below CSS Code is very useful for Model
Popup designing.
<style type="text/css">
.hidden
{
visibility:
hidden;
}
.shown
{
visibility:
visible;
}
.ButtonStyle
{
border:
thin solid #ECEBFA;
background-color:
#ECEBFA;
margin-left:
5px;
width:
auto;
height:
25px;
padding-left:
5px;
padding-right:
5px;
font-size:
13px;
font-weight:
bold;
padding-top:
3px;
padding-bottom:
3px;
text-align:
center;
color:
#636363;
border-radius:
5px;
-webkit-border-radius:
5px;
-moz-border-radius:
5px;
}
.ButtonStyle:hover
{
border-color:
#726E96;
color:
#636363;
cursor:
pointer;
}
.DynamicDialogStyle
{
background-color:
#F7FAFE;
font-size:
small;
}
label
{
width:
100px;
}
.ViewStyle
{
font-size:
xx-large;
text-decoration:
none;
}
.td_labe_head2
{
font-size:
9pt; /*color:
#336699;*/
color:
#800000;
font-family:
Verdana, Arial,
Helvetica, sans-serif;
font-weight:
bold;
}
.ClosePopupCls
{
color:
Black;
float:
right;
height:
21px;
font-size:
10px;
cursor:
pointer;
text-decoration:
none;
}
.ClosePopupCls
a:link
{
color:
Black;
text-decoration:
none;
}
.ClosePopupCls
a:visited
{
color:
Black;
text-decoration:
none;
}
.ClosePopupCls
a:hover
{
color:
Black;
text-decoration:
none;
}
.WaterMark
{
font-style:
italic;
color:
Gray;
}
.unWaterMark
{
font-style:
normal;
}
.ModelPopupBG
{
background-color:
#666699;
filter:
alpha(opacity=50);
opacity:
0.7;
}
.mpBg
{
background-color:
#3753fc;
filter:
alpha(opacity=30);
opacity:
0.3;
}
.mp
{
background-color:
white;
border-width:
3px;
border-style:
solid;
border-color:
Gray;
padding:
3px;
}
.mpHd
{
background-color:
#0A70AC;
border-color:
White;
border-width:
1px;
color:
White;
font-weight:
bold;
width:
100%;
height:
16px;
}
.mpClose
{
text-align:
center;
width:
100%;
}
.mpCloseButton
{
position:
absolute;
right:
4px;
width:
17px;
height:
18px;
}
</style>
Once CCS File code in completed
then add blow code in .aspx page. First we need add AjaxControlToolkit.
<%@
Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="cc1"
%>
Once AjaxControlToolkit is added
to the page, After we need to write below lines of code.
<table>
<tr>
<td>
<asp:LinkButton runat="server" ID="lbGroupPopup" OnClick=" lbGroupPopup_OnClick“></asp:LinkButton>
</td>
</tr>
//Below lines of code is related
to ModalPopupExtender.
<tr>
<td align="center">
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
TargetControlID="lbGroupPopup"
PopupControlID="PnlPresentInOppositeGroupUpdate"
PopupDragHandleControlID="Td1"
Drag="true" BackgroundCssClass="ModelPopupBG">
</cc1:ModalPopupExtender>
<asp:Panel ID="PnlPresentInOppositeGroupUpdate" CssClass="mp"
runat="server"
Style="display: none;"
Height="480px"
Width="450px"
align="center">
<table align="center"
class="mpHd"
width="450px">
<tr>
<td id="PanelTD">
Group
Information
</td>
<td>
<asp:Button runat="server"
ID="btnClose"
CssClass="ClosePopupCls"
Text="X"
/>
</td>
</tr>
</table>
<table width="400px"
height="400px"
align="center">
<tr>
<td valign="middle">
<table align="center"
style="width: 400px; height: 400px">
<tr>
<td>
<table
align="center"
style="width: 400px; height: 400px">
<tr>
<td style="background-color:
White;" width="150px" align="left">
Item Name
</td>
<td
style="background-color: White; color: Gray" align="left">
<asp:LinkButton ID="lbCatalogNo"
ForeColor="Gray"
CssClass="underLine"
runat="server"
OnClick="lbCatalogNo_OnClick"></asp:LinkButton>
</td>
</tr>
<tr>
<td
style="background-color:
White;" width="150px" align="left">
Item No
</td>
<td
style="background-color:
White;" align="left">
<asp:Label runat="server"
ID="lblItemNo”></asp:Label>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
</table>
Add below lines of code in .aspx.cs page.
protected void lbGroupPopup_OnClick(object
sender, EventArgs e)
{
this.ModalPopupExtender1.Show();
}
No comments:
Post a Comment