ajaxToolkit:ModalPopupExtender可以让用户模拟新开一个窗口,以下演示,就是在模拟新开窗口作多项选项的功能。
选择的小图片,它将要被ajaxToolkit:ModalPopupExtender使用,因为需要设为服务控件,添加runat="server":
View Code < img id ="ab" runat ="server" style ="margin-left: 5px; margin-bottom: 30px;"src ="../Image/ab.gif" width ="18" height ="18" />
下面是Popup窗口的Html,不过Insus.NET已经省略了Repeater控件内的内容,你在应用时,需要添加的你自己的,还是就是btnSelected_Click事件。
View Code < asp:Panel ID ="pnlPopupWindown" runat ="server" Style ="display: none; background-color: #ffffdd;border-width: 3px; border-style: solid; border-color: Gray; padding: 3px; width: 500px;" >
< asp:Panel ID ="Panel3" runat ="server" Style ="float: left; margin-bottom: 5px; cursor: move;
background-color: #DDDDDD; border: solid 1px Gray; color: Black; height: 20px;
width: 475px; text-align: center; line-height: 20px;" >
邮件地址列表
</ asp:Panel >
< asp:Panel ID ="Panel4" runat ="server" Style ="float: right; margin-bottom: 5px; background-color: #DDDDDD;
border: solid 1px Gray; color: Black; height: 20px; text-align: center; line-height: 20px;" >
< asp:LinkButton ID ="btnClose" runat ="server" Style ="margin-right: 4px; margin-left: 4px;"
OnClientClick ="return false;" Text ="×" ForeColor ="Red" ToolTip ="Close" />
</ asp:Panel >
< div >
< asp:Panel ID ="Panel1" runat ="server" ScrollBars ="Vertical" Height ="198px" Width ="100%"
BorderStyle ="Solid" BorderWidth ="1px" BorderColor ="Gray" >
< asp:Repeater ID ="RepeaterEmailList" runat ="server" >
</ asp:Repeater >
</ asp:Panel >
< div style ="height: 3px;" >
</ div >
< asp:Panel ID ="Panel2" runat ="server" >
< asp:Button ID ="btnSelected" runat ="server" OnClick ="btnSelected_Click" Text ="插入"
CausesValidation ="false" CssClass ="button" />
</ asp:Panel >
</ div >
</ asp:Panel >
< ajaxToolkit:ModalPopupExtender ID ="ModalPopupExtender1" runat ="server" TargetControlID ="ab"
PopupControlID ="pnlPopupWindown" BackgroundCssClass ="modalBackground" CancelControlID ="btnClose"
DropShadow ="true" PopupDragHandleControlID ="Panel3" />
< script type ="text/javascript" >
function setBodyHeightToContentHeight() {
document.body.style.height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight) + " px " ;
}
setBodyHeightToContentHeight();
$addHandler(window, " resize " , setBodyHeightToContentHeight);
</ script >
最后是CSS样式:
View Code /* Modal Popup */.modalBackground
{
background-color : Gray ;
filter : alpha(opacity=70) ;
opacity : 0.7 ;
}