example of ajax control "ModalPopup" using asp.net
ModalPopup.aspx
<%@ Page Language="C#"
AutoEventWireup="true"
CodeFile="ModalPopup.aspx.cs"
Inherits="ModalPopup"
%>
<%@ Register Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit"
TagPrefix="asp"
%>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"
runat="server">
<script language="javascript" type="text/javascript">
function
ShowPopup() {
$find('ctlModalPopup').show();
return
false;
}
function
MouseHover() {
$find("ctlModalPopup").show();
}
</script>
<style type="text/css">
.modalBackground
{
background-color:
Gray;
filter: alpha(opacity=80);
opacity:
0.8;
}
</style>
<%--<style type="text/css">
.PopupHeader
{
background-color:Black;
font-size:larger;
}
.ModalPopupBG
{
background-color: #666699;
filter: alpha(opacity=50);
opacity: 0.7;
}
.HellowWorldPopup
{
min-width:200px;
min-height:150px;
background:white;
}
</style>--%>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ScriptManager1" runat="server"></asp:ToolkitScriptManager>
<p><asp:Button id="btnOpenpopup" runat="server" text="Open Popup" /></p>
<p><asp:LinkButton id="lnkOpen" runat="server" OnClientClick="return ShowPopup();" text="Open Popup"
/> (using Javascript)</p>
<p><asp:HyperLink ID="lnkOpenPopup" runat="server"
onmouseover="MouseHover();"
Font-Underline="True" ForeColor="Blue">
<b>Hover over
the mouse to </b> </asp:HyperLink> to
open pop up</p>
<asp:ModalPopupExtender id="ctlModalPopup"
runat="server"
CancelControlID="btnCancel" OkControlID="btnOkay"
TargetControlID="btnOpenpopup" PopupControlID="pnlTarget"
PopupDragHandleControlID="pnlTarget"
X = "50" Y="80"
BackgroundCssClass="modalBackground">
</asp:ModalPopupExtender>
<asp:panel id="pnlTarget"
style="display: none" Width="150" runat="server">
<table class="mGrid2" width="150">
<tr>
<th colspan="2">Modal Popup Header</th>
</tr>
<tr>
<td colspan="2">Some Content</td>
</tr>
<tr>
<td><asp:Button ID="btnOkay" runat="server" Text="OK" /></td>
<td><asp:Button ID="btnCancel" runat="server" Text="Cancel" /></td>
</tr>
</table>
</asp:panel>
<%--<div>
<asp:Button ID="Button1"
runat="server" Text="Button" />
<asp:ModalPopupExtender ID="ModalPopupExtender1"
runat="server"
CancelControlID="btnCancel"
OkControlID="btnOkay"
TargetControlID="Button1"
PopupControlID="Panel1"
popupdraghandlecontrolid="PopupHeader"
drag="true"
backgroundcssclass="ModalPopupBG">
</asp:ModalPopupExtender>
<asp:Panel ID="Panel1"
runat="server" style="display: none">
<div
class="HellowWorldPopup">
<div>
Header
</div>
<div>
<p>this is model
popups</p>
</div>
<div>
<input
id="btnOkay" type="button" value="Done" />
<input
id="btnCancel" type="button" value="Cancel" />
</div>
</div>
</asp:Panel>
</div>--%>
</form>
</body>
</html>
ModalPopup.aspxcs
using System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
using
System.Web.UI;
using
System.Web.UI.WebControls;
public partial class ModalPopup : System.Web.UI.Page
{
protected void Page_Load(object
sender, EventArgs e)
{
}
}
0 comments :