ajaxToolkit:ModalPopupExtender演示及实现代码

ajaxToolkit:ModalPopupExtender可以让用户模拟新开一个窗口,以下演示,就是在模拟新开窗口作多项选项的功能。
 
演示例子中,是Repeater结合CheckBox进行多选,此功能实现,可以参考:http://www.jb51.net/article/33558.htm

选择的小图片,它将要被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;
}

(0)

相关推荐

  • jquery插件star-rating.js实现星级评分特效

    特效介绍 jquery星级评分插件star-rating.js下载插件,点击星星或者心的左边,就是半分,右边就是1分.点击减号,分数置为0.不兼容IE8以下的浏览器. 演示图 使用方法 第一步.引入下面的代码: 复制代码 代码如下: <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet"> <script s

  • ajaxToolkit:AccordionPane演示与应用实例

    一个展开收合的ajaxToolkit:AccordionPane控件.Insus.NET在专案有用到它. 因为它可以节省显示空间.不过有点不足,就是用户刚开始使用,需要记得每个AccordionPane内容.或是需要使用一个显而可见的名字.下面的演示中,只是两个收合AccordionPane,如果多个的话,就会有上面提及的问题. 下面是HTML:ajaxToolkit:Accordion 复制代码 代码如下: <ajaxToolkit:Accordion ID="Accordion1&qu

  • ajaxToolkit:CalendarExtender演示与实现代码

    Ajax的CalenderExtender的日期选择,下面可看到效果: Insus.NET使用ajaxToolkit:CalendarExtender,来实现日期选择功能.TextBox可以让用户输入,也可以点右边的小图,出现ajaxToolkit:CalendarExtender日期选择器. 可参考下面程序码: 复制代码 代码如下: <asp:TextBox ID="txtBookingDate" runat="server" CssClass="

  • jQuery插件-jRating评分插件源码分析及使用方法

    该插件被广泛应用于各种需要评分的页面当中,今天作为学习,把源码拿出来分析一下,顺便学习其使用方法. 一.插件使用一览. 复制代码 代码如下: <div> <div>第一个例子</div> <div id="16_1" class="myRating"></div> </div> 复制代码 代码如下: <link href="Script/jRating/jRating.jquer

  • AjaxControlToolKit CalendarExtender(日历扩展控件)的使用方法

    例子:只需要设置CalendarExtender的TargetControlID为需要显示日期的TextBox的ID即可以,textBox控件的readOnly属性设置为 false 主要代码: 复制代码 代码如下: <asp:ScriptManager ID="ScriptManager1" runat="server" EnableScriptGlobalization="True" EnableScriptLocalization=&

  • AjaxToolKit之Rating控件的使用方法

    AjaxToolKit中的Rating控件是微软Ajax控件库中专门用来处理网页评分(或投票)功能的控件,它本身支持网页无刷新功能,在使用的时候完全没有必要将它放在UpdatePanel控件里,而只需要将它的AutoPostBack属性设为False即可.该控件使用起来非常简单,而且还可以设置各种不同的效果,以及自定义函数回调等.下面是使用时候的一个截图 先说一下常用属性的功能:  ID:这个自然不用说了,大家都明白,所有的控件都会有一个服务器端的ID.  BehaviorID:通过Ajax客户

  • Android App中使用RatingBar实现星级打分功能的教程

    RatingBar简单介绍 RatingBar是基于SeekBar(拖动条)和ProgressBar(状态条)的扩展,用星形来显示等级评定,在使用默认RatingBar时,用户可以通过触摸/拖动/按键(比如遥控器)来设置评分, RatingBar自带有两种模式 ,一个小风格 ratingBarStyleSmall,大风格为ratingBarStyleIndicator,大的只适合做指示,不适用与用户交互. 自定义RatingBar需要注意的地方 一般情况下,系统自带的RatingBar是远远无法

  • Android控件之RatingBar自定义星级评分样式

    一.RatingBar简单介绍 RatingBar是基于SeekBar(拖动条)和ProgressBar(状态条)的扩展,用星形来显示等级评定,在使用默认RatingBar时,用户可以通过触摸/拖动/按键(比如遥控器)来设置评分, RatingBar自带有两种模式 ,一个小风格 ratingBarStyleSmall,大风格为ratingBarStyleIndicator,大的只适合做指示,不适用与用户交互. 效果图展示: 二.实例 1.布局文件 <?xml version="1.0&qu

  • ajaxToolkit:TextBoxWatermarkExtender演示与实现代码

    首先看看效果:  该控件的效果就是在TextBox控件上添加"水印"效果,也就是当TextBox为空时,显示提示消息,一旦TextBox聚焦,样式就消失. Insus.NET实现两行文字水印,其实也没有什么技术含量,即是加了几个空格而已. 复制代码 代码如下: <asp:TextBox ID="txtCCEmail" runat="server" TextMode="MultiLine" Height="50&

  • asp.net AjaxControlToolKit--TabContainer控件的介绍

     AjaxControlToolKit--TabContainer控件的介绍收藏 1. Introduction: Tab本身就应该是个以页签形式显示组织网页内容的一个控件.在AJAX Control Tool Kit的控件中有TabContainer控件,它是一些TabPanel控件的载体,而每个TabPanel可以像标准的Panel控件一样,成为其它一些ASP.NET控件的容器.TabPanel通过它的三部分结构HeaderText, HeaderTemplate和ContentTempla

随机推荐