ModalPopupExtender is a very useful control in Ajax Control Toolkit. It's used to display content as a modal dialog box. Here when the user clicks the "Show" button a panel will be displayed as a modal dialog. That panel has a "Hide" button. When the user clicks the hide button the modal dialog will be closed. use your creativity to display the modal dialog box more interactively using CSS.
Namespace:
Design Code:
C# Code:
CSS code:
Note: you have to add Ajax Controll Toolkit in project.
using AjaxControlToolkit;
Design Code:
<asp:Button ID="btn_Show" runat="server" Text="Show" OnClick="btn_Show_Click" />
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" PopupControlID="Panel1" TargetControlID="HiddenField1" BackgroundCssClass="modalBackground"></cc1:ModalPopupExtender>
<asp:HiddenField ID="HiddenField1" runat="server" />
<asp:Panel ID="Panel1" runat="server">
<div style="width: 200px; height: 150px; background-color: yellow;">
<asp:Button ID="btn_Hide" runat="server" Text="Hide" OnClick="btn_Hide_Click" />
</div>
</asp:Panel>
C# Code:
protected void btn_Show_Click(object sender, EventArgs e)
{
this.ModalPopupExtender1.Show();
}
protected void btn_Hide_Click(object sender, EventArgs e)
{
this.ModalPopupExtender1.Hide();
}
CSS code:
.modalBackground
{
background-color: Gray;
filter: alpha(opacity=70);
opacity: 0.7;
}
Note: you have to add Ajax Controll Toolkit in project.
No comments:
Post a Comment