欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ajaxToolkit:ModalPopupExtender演示及实现代码

程序员文章站 2024-03-05 16:01:19
ajaxtoolkit:modalpopupextender可以让用户模拟新开一个窗口,以下演示,就是在模拟新开窗口作多项选项的功能。  演示例子中,是repea...
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;
}