ajaxToolkit:ModalPopupExtender演示及实现代码

ajaxtoolkit:modalpopupextender可以让用户模拟新开一个窗口，以下演示，就是在模拟新开窗口作多项选项的功能。
 
演示例子中，是repeater结合checkbox进行多选，此功能实现，可以参考：

选择的小图片，它将要被ajaxtoolkit:modalpopupextender使用，因为需要设为服务控件，添加runat="server"：

<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事件。

<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样式：

/*modal popup*/
.modalbackground
{
background-color: gray;
filter: alpha(opacity=70);
opacity: 0.7;
}