<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!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">
<title>无标题页</title>
<style type="text/css">
.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}
.modalPopup {
background-color:#ffffdd;
border-3px;
border-style:solid;
border-color:Gray;
padding:3px;
250px;
}
.sampleStyleA {
background-color:#FFF;
}
.sampleStyleB {
background-color:#FFF;
font-family:monospace;
font-size:10pt;
font-weight:bold;
}
.sampleStyleC {
background-color:#ddffdd;
font-family:sans-serif;
font-size:10pt;
font-style:italic;
}
.sampleStyleD {
background-color:Blue;
color:White;
font-family:Arial;
font-size:10pt;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
<asp:Panel ID="Panel1" runat="server" >
<asp:Panel ID="Panel2" runat="server" CssClass="modalPopup" Width="309px">
<div>
<p>
请选择页面风格：</p>
<p>
<asp:UpdatePanel ID ="upl1" runat="server">
<ContentTemplate>
<asp:Button ID="btnTest" runat="server" Text ="传值" onclick="btnTest_Click"/>
</ContentTemplate>
</asp:UpdatePanel>
<input type="radio" name="Radio" id="RadioA" checked="checked" onclick="styleToSelect = 'sampleStyleA';" />
<label for="RadioA" class="sampleStyleA" style="padding: 3px;">
风格样式一</label>
</p>
<p>
<input type="radio" name="Radio" id="RadioB" onclick="styleToSelect = 'sampleStyleB';" />
<label for="RadioB" class="sampleStyleB" style="padding: 3px;">
风格样式二</label>
</p>
<p>
<input type="radio" name="Radio" id="RadioC" onclick="styleToSelect = 'sampleStyleC';" />
<label for="RadioC" class="sampleStyleC" style="padding: 3px;">
风格样式三</label>
</p>
<p>
<input type="radio" name="Radio" id="RadioD" onclick="styleToSelect = 'sampleStyleD';" />
<label for="RadioD" class="sampleStyleD" style="padding: 3px;">
风格样式四
</label>
</p>
<p>
<label class="sampleStyleD" for="RadioD" style="padding-right: 3px; padding-left: 3px;
padding-bottom: 3px; padding-top: 3px">
<span style="font-size: 12pt"><span><span style="color: #000000"></span></span>
</span>
</label>
<asp:Button ID="OkButton" runat="server" Text="确定" />
<asp:Button ID="CancelButton" runat="server" Text="取消" />
</p>
</div>
</asp:Panel>
</asp:Panel>
<%-- Okcontrolid：指定确定按钮
Cancelcontrolid：指定取消按钮
Onokscript：确定时执行的javascript函数，这个要我们自己在aspx页面中写。
Oncancelscript：取消时执行的javascript函数，这个要我们自己在aspx页面中写。
Popupcontrolid：指定底层的容器，这里就是我们拖入的panel
Popupdraghandlecontrolid：指定可以拖动的容器，假如只有一个容器就与上面的一样。
--%>
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
TargetControlID="LinkButton1"
PopupControlID="Panel1"
BackgroundCssClass="modalBackground"
OkControlID="OkButton"
OnOkScript="onOk();"
CancelControlID="CancelButton"
DropShadow="true"
Drag="true"
PopupDragHandleControlID="Panel2"/>
<asp:UpdatePanel ID="upl2" runat="server">
<ContentTemplate>
<asp:TextBox ID="txtTest" runat ="server"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
<p id="Paragraph1">
今天天气不错挺风和日丽的<br />
我们下午没有课这天气挺爽的
<br />
我一大中午早早的跑去上自习心里啄么着大学生活是多么美好啊 ……
</p>
</div>
</form>
<script type="text/javascript">
var styleToSelect;
function onOk() {
$get('Paragraph1').className = styleToSelect;
}
</script>
</body>
<!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">
<title>无标题页</title>
<style type="text/css">
.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}
.modalPopup {
background-color:#ffffdd;
border-3px;
border-style:solid;
border-color:Gray;
padding:3px;
250px;
}
.sampleStyleA {
background-color:#FFF;
}
.sampleStyleB {
background-color:#FFF;
font-family:monospace;
font-size:10pt;
font-weight:bold;
}
.sampleStyleC {
background-color:#ddffdd;
font-family:sans-serif;
font-size:10pt;
font-style:italic;
}
.sampleStyleD {
background-color:Blue;
color:White;
font-family:Arial;
font-size:10pt;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
<asp:Panel ID="Panel1" runat="server" >
<asp:Panel ID="Panel2" runat="server" CssClass="modalPopup" Width="309px">
<div>
<p>
请选择页面风格：</p>
<p>
<asp:UpdatePanel ID ="upl1" runat="server">
<ContentTemplate>
<asp:Button ID="btnTest" runat="server" Text ="传值" onclick="btnTest_Click"/>
</ContentTemplate>
</asp:UpdatePanel>
<input type="radio" name="Radio" id="RadioA" checked="checked" onclick="styleToSelect = 'sampleStyleA';" />
<label for="RadioA" class="sampleStyleA" style="padding: 3px;">
风格样式一</label>
</p>
<p>
<input type="radio" name="Radio" id="RadioB" onclick="styleToSelect = 'sampleStyleB';" />
<label for="RadioB" class="sampleStyleB" style="padding: 3px;">
风格样式二</label>
</p>
<p>
<input type="radio" name="Radio" id="RadioC" onclick="styleToSelect = 'sampleStyleC';" />
<label for="RadioC" class="sampleStyleC" style="padding: 3px;">
风格样式三</label>
</p>
<p>
<input type="radio" name="Radio" id="RadioD" onclick="styleToSelect = 'sampleStyleD';" />
<label for="RadioD" class="sampleStyleD" style="padding: 3px;">
风格样式四
</label>
</p>
<p>
<label class="sampleStyleD" for="RadioD" style="padding-right: 3px; padding-left: 3px;
padding-bottom: 3px; padding-top: 3px">
<span style="font-size: 12pt"><span><span style="color: #000000"></span></span>
</span>
</label>
<asp:Button ID="OkButton" runat="server" Text="确定" />
<asp:Button ID="CancelButton" runat="server" Text="取消" />
</p>
</div>
</asp:Panel>
</asp:Panel>
<%-- Okcontrolid：指定确定按钮
Cancelcontrolid：指定取消按钮
Onokscript：确定时执行的javascript函数，这个要我们自己在aspx页面中写。
Oncancelscript：取消时执行的javascript函数，这个要我们自己在aspx页面中写。
Popupcontrolid：指定底层的容器，这里就是我们拖入的panel
Popupdraghandlecontrolid：指定可以拖动的容器，假如只有一个容器就与上面的一样。
--%>
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
TargetControlID="LinkButton1"
PopupControlID="Panel1"
BackgroundCssClass="modalBackground"
OkControlID="OkButton"
OnOkScript="onOk();"
CancelControlID="CancelButton"
DropShadow="true"
Drag="true"
PopupDragHandleControlID="Panel2"/>
<asp:UpdatePanel ID="upl2" runat="server">
<ContentTemplate>
<asp:TextBox ID="txtTest" runat ="server"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
<p id="Paragraph1">
今天天气不错挺风和日丽的<br />
我们下午没有课这天气挺爽的
<br />
我一大中午早早的跑去上自习心里啄么着大学生活是多么美好啊 ……
</p>
</div>
</form>
<script type="text/javascript">
var styleToSelect;
function onOk() {
$get('Paragraph1').className = styleToSelect;
}
</script>
</body>