AjaxControlToolkit 微软出的ajax.net 工具使用教程十三 ModalPopupExtender 控件的使用
2007-05-16 16:34
931 查看
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var styleToSelect;
function onOk() {
document.getElementById('Paragraph1').className = styleToSelect;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<br />
<asp:LinkButton ID="LinkButton1" runat="server">Please click to select an alternate text style.</asp:LinkButton><br />
<br />
<div>
<p id="Paragraph1">
<a href="http://joeon.net"><span style="color: #3366cc">Joe Stagner</span></a>,
a member of the Microsoft product team, builds a CascadingDropDown sample application
that demonstrates two fundamental benefits of ajax-enabled web applications, namely
web service integration and asynchronous page updates.
</p>
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Style="display: none" Width="233px">
<p>Choose the style you would like:</p>
<input id="RadioA" name="Radio" onclick="styleToSelect = 'sampleStyleA';" type="radio" />
<label class="sampleStyleA" for="RadioA">Choose THIS Style.</label><br />
<input id="RadioB" name="Radio" onclick="styleToSelect = 'sampleStyleB';" type="radio" />
<label class="sampleStyleB" for="RadioB">Choose THIS Style.</label><br />
<input id="RadioC" name="Radio" onclick="styleToSelect = 'sampleStyleC';" type="radio" />
<label class="sampleStyleC" for="RadioC">Choose THIS Style.</label><br />
<input id="RadioD" name="Radio" onclick="styleToSelect = 'sampleStyleD';" type="radio" />
<label class="sampleStyleD" for="RadioD">Choose THIS Style.</label><br />
<br />
<div align="center">
<asp:Button ID="OkButton" runat="server" Text="OK" />
<asp:Button ID="CancelButton" runat="server" Text="Cancel" />
</div>
</asp:Panel>
<br />
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
TargetControlID="LinkButton1"
PopupControlID="Panel1"
BackgroundCssClass="modalBackground"
DropShadow="true"
OkControlID="OkButton"
OnOkScript="onOk()"
CancelControlID="CancelButton" />
</div>
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var styleToSelect;
function onOk() {
document.getElementById('Paragraph1').className = styleToSelect;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<br />
<asp:LinkButton ID="LinkButton1" runat="server">Please click to select an alternate text style.</asp:LinkButton><br />
<br />
<div>
<p id="Paragraph1">
<a href="http://joeon.net"><span style="color: #3366cc">Joe Stagner</span></a>,
a member of the Microsoft product team, builds a CascadingDropDown sample application
that demonstrates two fundamental benefits of ajax-enabled web applications, namely
web service integration and asynchronous page updates.
</p>
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Style="display: none" Width="233px">
<p>Choose the style you would like:</p>
<input id="RadioA" name="Radio" onclick="styleToSelect = 'sampleStyleA';" type="radio" />
<label class="sampleStyleA" for="RadioA">Choose THIS Style.</label><br />
<input id="RadioB" name="Radio" onclick="styleToSelect = 'sampleStyleB';" type="radio" />
<label class="sampleStyleB" for="RadioB">Choose THIS Style.</label><br />
<input id="RadioC" name="Radio" onclick="styleToSelect = 'sampleStyleC';" type="radio" />
<label class="sampleStyleC" for="RadioC">Choose THIS Style.</label><br />
<input id="RadioD" name="Radio" onclick="styleToSelect = 'sampleStyleD';" type="radio" />
<label class="sampleStyleD" for="RadioD">Choose THIS Style.</label><br />
<br />
<div align="center">
<asp:Button ID="OkButton" runat="server" Text="OK" />
<asp:Button ID="CancelButton" runat="server" Text="Cancel" />
</div>
</asp:Panel>
<br />
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
TargetControlID="LinkButton1"
PopupControlID="Panel1"
BackgroundCssClass="modalBackground"
DropShadow="true"
OkControlID="OkButton"
OnOkScript="onOk()"
CancelControlID="CancelButton" />
</div>
</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- AjaxControlToolkit 微软出的ajax.net 工具使用教程十四 PopupControlExtender（弹出） 控件的使用
- AjaxControlToolkit 微软出的ajax.net 工具使用教程九 DragPanelExtender（拖拉）控件的使用
- ★ AjaxControlToolkit 微软出的ajax.net 工具使用教程五 ConfirmButtonExtender控件的使用
- AjaxControlToolkit 微软出的ajax.net 工具使用教程三 AlwaysVisibleControlExtender（浮动）控件的使用
- AjaxControlToolkit 微软出的ajax.net 工具使用教程十一 FilteredTextBoxExtender（筛选） 控件的使用
- AjaxControlToolkit 微软出的ajax.net 工具使用教程三 AlwaysVisibleControlExtender（浮动）控件的使用
- AjaxControlToolkit 微软出的ajax.net 工具使用教程十二 HoverMenuExtender（滑出菜单） 控件的使用
- AjaxControlToolkit 微软出的ajax.net 工具使用教程二十 AutoCompleteExtender（自动提示）控件的使用
- AjaxControlToolkit 微软出的ajax.net 工具使用教程四 CollapsiblePanelExtender（隐藏）控件的使用
- AjaxControlToolkit 微软出的ajax.net 工具使用教程十六 TextBoxWatermarkExtender（水印） 控件的使用
- AjaxControlToolkit 微软出的ajax.net 工具使用教程二十三 DropDownExtender（下拉对话框）控件的使用
- AjaxControlToolkit 微软出的ajax.net 工具使用教程十五 RoundedCornersExtender（圆角） 控件的使用
- AjaxControlToolkit 微软出的ajax.net 工具使用教程二十二 ConfirmButtonExtender （确认对话框）控件的使用
- AjaxControlToolkit 微软出的ajax.net 工具使用教程五 ConfirmButtonExtender（确认）控件的使用
- AjaxControlToolkit 微软出的ajax.net 工具使用教程十 DynamicPopulateExtender（动态）控件的使用
- AjaxControlToolkit 微软出的ajax.net 工具使用教程二十五 SliderExtender 控件的使用
- ★ AjaxControlToolkit 微软出的ajax.net 工具使用教程四 CollapsiblePanelExtender控件的使用
- AjaxControlToolkit 微软出的ajax.net 工具使用教程十九 AnimationExtender （动态）控件的使用
- AjaxControlToolkit 微软出的ajax.net 工具使用教程二 Accordion（折叠）控件的使用
- AjaxControlToolkit 微软出的ajax.net 工具使用教程十八 PasswordStrength （密码强度检验）控件的使用