Introduction:
In this example Iam Going to explain how to use ModalPopup extender Control in asp.net.
If you want to check all the example in my site please check this link Ajax all extenders examples and also you check my previous example Accordion panel extender
Demo:
Description:
The ModalPopup extender allows a page to display content to the user in a "modal" manner which prevents the user from interacting with the rest of the page. The modal content can be any hierarchy of controls and is displayed above a background that can have a custom style applied to it.
When Ever You Want to Use Ajax Controls in your website First you need Add.
AjaxControlToolkit reference to your application.
<%@ Register
Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit"
TagPrefix="asp"
%>
You can Change TagPrefix Also,Some Exaples tagPrefix="ajax", tagPrefix="cc1",tagPrefix="asp"
And also you have to add Tool kit Scriptmanager Control under <Form> tag:
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
Your aspx page:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
.modalBackground
{
position: absolute;
top: 0px;
left: 0px;
filter: alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}
.popup
{
background-color: #ddd;
margin: 0px auto;
width: 330px;
position: relative;
border: Gray 2px inset;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager
ID="ToolkitScriptManager1"
runat="server">
</asp:ToolkitScriptManager>
<div>
<asp:Panel ID="pnModelPopup"
runat="server"
CssClass="popup">
<table>
<tr>
<td>
User Name:
</td>
<td>
<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Password:
</td>
<td>
<asp:TextBox ID="txtPassword" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnSignin" runat="server" Text="Sign in" Style="margin-left: 100px"
OnClick="btnSignin_Click"
/>
</td>
<td>
<asp:Button ID="btnCancel" runat="server" Text="Cancel" />
</td>
</tr>
</table>
</asp:Panel>
<asp:ModalPopupExtender
ID="ModalPopupExtender1"
runat="server"
PopupControlID="pnModelPopup"
TargetControlID="lnkbtnSignin"
DropShadow="true"
BackgroundCssClass="modalBackground"
CancelControlID="btnCancel"
PopupDragHandleControlID="pnModelPopup"
OnOkScript="onOk()">
</asp:ModalPopupExtender>
<div style="margin-left: 300px">
<asp:LinkButton ID="lnkbtnSignin"
runat="server">Sign
in</asp:LinkButton>
</div>
</div>
</form>
</body>
</html>
|
