AJAX之ModalPopup控件

前台主要代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ 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">

</script>

.style1

{

width: 100%;

}

p {

margin: 10px 0px;

}

strong

{

line-height:150%;

}

</style>

</head>

<body>

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<asp:Panel ID="Panel2" runat="server" Height="343px" Width="661px"

Font-Bold="True" Font-Size="Small">

功能：

使用时，会使整个屏幕都会是灰色的，只有一个“模式”对话框可以操作. ModalPopup是一个扩展控件，

它建立在已经存在panel等容器控件的基础上，而panel上可以放置任何控件，panel的样式也是自定义的. 当控件使用时, 点击panel之外的操作都是无效的.

属性：

<table border="1" cellpadding="0" cellspacing="0"

style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none; BORDER-COLLAPSE: collapse">

<tr>

<td style="BORDER-RIGHT: windowtext 1pt solid; PADDING-RIGHT: 5.4pt; PADDING-LEFT: 5.4pt; PADDING-BOTTOM: 0cm; BORDER-LEFT: windowtext 1pt solid; WIDTH: 140.4pt; BORDER-TOP-COLOR: #ece9d8; PADDING-TOP: 0cm; BORDER-BOTTOM: windowtext 1pt solid; BACKGROUND-COLOR: transparent"

valign="top" width="187">

TargetControlID

</td>

<td style="BORDER-RIGHT: windowtext 1pt solid; PADDING-RIGHT: 5.4pt; PADDING-LEFT: 5.4pt; BORDER-LEFT-COLOR: #ece9d8; PADDING-BOTTOM: 0cm; WIDTH: 285.7pt; BORDER-TOP-COLOR: #ece9d8; PADDING-TOP: 0cm; BORDER-BOTTOM: windowtext 1pt solid; BACKGROUND-COLOR: transparent"

valign="top" width="381">

点击后出现对话框的控件，一般为按钮控件

</td>

</tr>

<tr>

valign="top" width="187">

PopupControlID

</td>

valign="top" width="381">

对话框中的Panel的id

</td>

</tr>

<tr>

valign="top" width="187">

BackgroundCssClass

</td>

valign="top" width="381">

背景的css

</td>

</tr>

<tr>

valign="top" width="187">

DropShadow

</td>

valign="top" width="381">

对话框是否有阴影效果

</td>

</tr>

<tr>

valign="top" width="187">

OkControlID

</td>

valign="top" width="381">

Ok按钮的id

</td>

</tr>

<tr>

valign="top" width="187">

OnOkScript

</td>

valign="top" width="381">

Ok按钮触发脚本

</td>

</tr>

<tr>

valign="top" width="187">

CancelControlID

</td>

valign="top" width="381">

Cancel按钮的id

</td>

</tr>

<tr>

valign="top" width="187">

OkCancelScript

</td>

valign="top" width="381">

Cancel按钮触发脚本

</td>

</tr>

<tr>

valign="top" width="187">

PopupDragHandleControlID

</td>

valign="top" width="381">

Panel的中的标题栏，可以拖动，一般也是Panel

</td>

</tr>

<tr>

valign="top" width="187">

X

</td>

valign="top" width="381">

出现时，顶部的位置。

</td>

</tr>

<tr>

valign="top" width="187">

Y

</td>

valign="top" width="381">

出现时，左边的位置。

</td>

</tr>

</table>

</asp:Panel>

<asp:LinkButton ID="LinkButton1" runat="server">点击这里改变网页的样式</asp:LinkButton>

<cc1:ModalPopupExtender ID="LinkButton1_ModalPopupExtender" runat="server"

BackgroundCssClass="ModalBackground" CancelControlID="Button2"

DynamicServicePath="" Enabled="True" OkControlID="Button1"

PopupControlID="Panel1" TargetControlID="LinkButton1" OnOkScript="onOK()"

DropShadow="True">

</cc1:ModalPopupExtender>

<asp:Panel ID="Panel1" runat="server" Height="120px" style="text-align: center"

Width="252px" Font-Bold="True" Font-Size="Small" BackColor="#66CCFF">

<tr>

<td>

请选择你喜欢的样式：</td>

</tr>

<tr>

<td>

<input ID="Radio1" type="radio" onclick="styleToSelect='StyleA';" name="A"

checked="checked" /><asp:Label ID="Label1" runat="server" Text="选用这个样式" CssClass="StyleA"></asp:Label>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

<asp:Button ID="Button1" runat="server" Text="确定" />

<asp:Button ID="Button2" runat="server" Text="取消" />

</td>

</tr>

</table>

</asp:Panel>

</div>

</form>

</body>

</html>

CSS文件：

body {

}

.ModalBackground

{

background-color:Gray;

filter:alpha(opacity=70);

opacity:.7;

}

.StyleA

{

background-color:#FFF;

}

.StyleB

{

background-color:blue;

color:White;

font-family:Arial;

font-size:10pt;

}

.StyleC

{

background-color:#DDFFDD;

font-family:sans-serif;

font-size:10pt;

font-style:italic;

}

Javascript脚本：

var styleToSelect;

function onOK()

{

$get('Panel2').className=styleToSelect;

}

posted @ 2008-03-30 23:23 MicroCoder 阅读(802) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

MicroCoder

{编程之美}

AJAX之ModalPopup控件

公告