AJAX ControlToolkit学习日志-ModalPopupExtender(16)
ModalPopupExtender控件用于设置网页上文本的样式。
下面看一个示例：
1)在Vs2005中新建一个ASP.NET AJAX-Enabeld Web Project项目工程，命名为ModalPopupExtender1。
2)在Default.aspx中的<div/>标签中添加一段文字。再添加一个LinkButton控件，用于触发控制样式面板生成。
3)然后再页面上添加一个Panel，命名为Panel1，作为弹出面板。在Panel1中添加一个Panel，命名为Panel2，作为控制拖动的控件。最后在Panel1中添加4个Radio控件，用于提供不同的样式。
代码如下：
4)在页面上添加一个ModalPopupExtender，并设置一些属性。
代码如下：
属性说明：
TargetControlID：用于触发弹出面板的控件。
OkControlID：弹出面板中的确认按钮，用于确认新的样式。
OnOkScript：当单击确认按钮后，关闭样式面板后，执行脚本。
CancelControlID：样式面板中的取消按钮，用于取消应用样式。
PopupDragHandleControlID：样式面板中用于触发面板的控件。
DropShadow：样式面板是否有阴影。值为True，则有阴影；值为False，则没有阴影。
BackgroundCssClass：样式面板中应用的css样式。
5)在页面中添加脚本，用于处理弹出面板中样式选择。
代码如下：
6)按下CTRL+F5,在浏览器中查看效果。
效果图如下：
下面看一个示例：
1)在Vs2005中新建一个ASP.NET AJAX-Enabeld Web Project项目工程，命名为ModalPopupExtender1。
2)在Default.aspx中的<div/>标签中添加一段文字。再添加一个LinkButton控件，用于触发控制样式面板生成。
3)然后再页面上添加一个Panel，命名为Panel1，作为弹出面板。在Panel1中添加一个Panel，命名为Panel2，作为控制拖动的控件。最后在Panel1中添加4个Radio控件，用于提供不同的样式。
代码如下：
1
<asp:Panel ID="Panel1" runat="server" BorderColor="DeepSkyBlue" BorderWidth="1px"
2 Height="278px" HorizontalAlign="Center" Width="420px" style="display:none;" CssClass="modalPopup">
3 <asp:Panel ID="Panel2" runat="server" BorderColor="Orange" BorderWidth="1px" Height="25px"
4 HorizontalAlign="Center" style="margin:top 4px;cursor:move;" Width="409px" >
5 Choose the paragraph style you would like:</asp:Panel>
6 <br />
7 <div style="width:420px;text-align:left">
8 <p class="sampleSytleA"><input id="Radio1" name="styleSelect" checked="checked" type="radio" onclick="styleToSelect='sampleStyleA'" />Sample paragraph text</p>
9 <p class="sampleStyleB"><input id="Radio2" name="styleSelect" type="radio" onclick="styleToSelect='sampleStyleB'" />Sample paragraph text</p>
10 <p class="sampleStyleC"><input id="Radio3" name="styleSelect" type="radio" onclick="styleToSelect='sampleStyleC'" />Sample paragraph text</p>
11 <p class="sampleStyleD"><input id="Radio4" name="styleSelect" type="radio" onclick="styleToSelect='sampleStyleD'" />Sample paragraph text</p>
12 </div>
13 <div style="text-align:center">
14 <asp:Button ID="OkButton" runat="server" Text="OK" />
15 <asp:Button ID="CancelButton" runat="server" Text="Cancel" />
16 </div>
17 </asp:Panel>
<asp:Panel ID="Panel1" runat="server" BorderColor="DeepSkyBlue" BorderWidth="1px"2
Height="278px" HorizontalAlign="Center" Width="420px" style="display:none;" CssClass="modalPopup">3
<asp:Panel ID="Panel2" runat="server" BorderColor="Orange" BorderWidth="1px" Height="25px"4
HorizontalAlign="Center" style="margin:top 4px;cursor:move;" Width="409px" >5
Choose the paragraph style you would like:</asp:Panel>6
<br />7
<div style="width:420px;text-align:left">8
<p class="sampleSytleA"><input id="Radio1" name="styleSelect" checked="checked" type="radio" onclick="styleToSelect='sampleStyleA'" />Sample paragraph text</p>9
<p class="sampleStyleB"><input id="Radio2" name="styleSelect" type="radio" onclick="styleToSelect='sampleStyleB'" />Sample paragraph text</p>10
<p class="sampleStyleC"><input id="Radio3" name="styleSelect" type="radio" onclick="styleToSelect='sampleStyleC'" />Sample paragraph text</p>11
<p class="sampleStyleD"><input id="Radio4" name="styleSelect" type="radio" onclick="styleToSelect='sampleStyleD'" />Sample paragraph text</p>12
</div>13
<div style="text-align:center">14
<asp:Button ID="OkButton" runat="server" Text="OK" />15
<asp:Button ID="CancelButton" runat="server" Text="Cancel" />16
</div>17
</asp:Panel>4)在页面上添加一个ModalPopupExtender，并设置一些属性。
代码如下：
1 <cc1:modalpopupextender id="ModalPopupExtender1" TargetControlID="LinkButton1"
2 OkControlID="OkButton" OnOkScript="onOk()" CancelControlID="CancelButton" PopupDragHandleControlID="Panel2" DropShadow="true" PopupControlID="Panel1" BackgroundCssClass="modalBackground" runat="server"></cc1:modalpopupextender>
3
<cc1:modalpopupextender id="ModalPopupExtender1" TargetControlID="LinkButton1"2
OkControlID="OkButton" OnOkScript="onOk()" CancelControlID="CancelButton" PopupDragHandleControlID="Panel2" DropShadow="true" PopupControlID="Panel1" BackgroundCssClass="modalBackground" runat="server"></cc1:modalpopupextender>3
属性说明：
TargetControlID：用于触发弹出面板的控件。
OkControlID：弹出面板中的确认按钮，用于确认新的样式。
OnOkScript：当单击确认按钮后，关闭样式面板后，执行脚本。
CancelControlID：样式面板中的取消按钮，用于取消应用样式。
PopupDragHandleControlID：样式面板中用于触发面板的控件。
DropShadow：样式面板是否有阴影。值为True，则有阴影；值为False，则没有阴影。
BackgroundCssClass：样式面板中应用的css样式。
5)在页面中添加脚本，用于处理弹出面板中样式选择。
代码如下：
1 var styleToSelect;
2 function onOk()
3
{
4
$get("text").className=styleToSelect;
5
}
var styleToSelect;2
function onOk()3
{
4
$get("text").className=styleToSelect;5
}6)按下CTRL+F5,在浏览器中查看效果。
效果图如下：
