AJAX ControlToolkit学习日志-ModalPopupExtender(16)
下面看一个示例:
1)在Vs2005中新建一个ASP.NET AJAX-Enabeld Web Project项目工程,命名为ModalPopupExtender1。
2)在Default.aspx中的<div/>标签中添加一段文字。再添加一个LinkButton控件,用于触发控制样式面板生成。
3)然后再页面上添加一个Panel,命名为Panel1,作为弹出面板。在Panel1中添加一个Panel,命名为Panel2,作为控制拖动的控件。最后在Panel1中添加4个Radio控件,用于提供不同的样式。
代码如下:
2 Height="278px" HorizontalAlign="Center" Width="420px" style="display:none;" CssClass="modalPopup">
3 <asp:Panel ID="Panel2" runat="server" BorderColor="Orange" BorderWidth="1px" Height="25px"
4 HorizontalAlign="Center" style="margin:top 4px;cursor:move;" Width="409px" >
5 Choose the paragraph style you would like:</asp:Panel>
6 <br />
7 <div style="width:420px;text-align:left">
8 <p class="sampleSytleA"><input id="Radio1" name="styleSelect" checked="checked" type="radio" onclick="styleToSelect='sampleStyleA'" />Sample paragraph text</p>
9 <p class="sampleStyleB"><input id="Radio2" name="styleSelect" type="radio" onclick="styleToSelect='sampleStyleB'" />Sample paragraph text</p>
10 <p class="sampleStyleC"><input id="Radio3" name="styleSelect" type="radio" onclick="styleToSelect='sampleStyleC'" />Sample paragraph text</p>
11 <p class="sampleStyleD"><input id="Radio4" name="styleSelect" type="radio" onclick="styleToSelect='sampleStyleD'" />Sample paragraph text</p>
12 </div>
13 <div style="text-align:center">
14 <asp:Button ID="OkButton" runat="server" Text="OK" />
15 <asp:Button ID="CancelButton" runat="server" Text="Cancel" />
16 </div>
17 </asp:Panel>
4)在页面上添加一个ModalPopupExtender,并设置一些属性。
代码如下:
2 OkControlID="OkButton" OnOkScript="onOk()" CancelControlID="CancelButton" PopupDragHandleControlID="Panel2" DropShadow="true" PopupControlID="Panel1" BackgroundCssClass="modalBackground" runat="server"></cc1:modalpopupextender>
3
属性说明:
TargetControlID:用于触发弹出面板的控件。
OkControlID:弹出面板中的确认按钮,用于确认新的样式。
OnOkScript:当单击确认按钮后,关闭样式面板后,执行脚本。
CancelControlID:样式面板中的取消按钮,用于取消应用样式。
PopupDragHandleControlID:样式面板中用于触发面板的控件。
DropShadow:样式面板是否有阴影。值为True,则有阴影;值为False,则没有阴影。
BackgroundCssClass:样式面板中应用的css样式。
5)在页面中添加脚本,用于处理弹出面板中样式选择。
代码如下:
2 function onOk()
3 {
4 $get("text").className=styleToSelect;
5 }
6)按下CTRL+F5,在浏览器中查看效果。
效果图如下:
转载于:https://www.cnblogs.com/qc1984326/archive/2007/03/20/681627.html
AJAX ControlToolkit学习日志-ModalPopupExtender(16)相关推荐
- AJAX ControlToolkit学习日志-ResizableControlExtender(23)
ResizableControlExtender控件用于对一个web控件进行伸缩. 下面来看一个示例: 1)在VS2005中新建一个ASP.NET AJAX-Enabled Web ...
- AJAX ControlToolkit学习日志-Tabs(27)
Tabs控件其实是一个容器控件TabContainer和面板控件TabPanel.TabContainer控件用于包含TabPanel.TabPanel控件用于显示. 下面来看一个示 ...
- AJAX ControlToolkit学习日志-AnimationExtender控件(3)
AnimationExtender控件是添加动画效果的控件扩展.在动画组合中可以添加的事件如:OnClick,OnLoad,OnMouseOver,OnMourseOut,OnHoverO ...
- Python学习日志16 - 数据库SQL查询
Python学习日志 RBHGO的主页欢迎关注 温馨提示:创作不易,如有转载,注明出处,感谢配合~ 目录 文章目录 Python学习日志 目录 Python学习日志16课 - 数据库SQL查询 DQL ...
- Ajax学习日志(三)—— 如何传递get请求参数
Ajax入门(三) 一.如何传递get请求参数 1.1) 在app.js创建新路由 1.2) 在public文件夹新建一个html文件 1.3)运行 一.如何传递get请求参数 1.1) 在app.j ...
- 苏嵌学习日志08 07.16
学习日志 刘易中 07.16 今日学习任务 C51单片机的基本常识.LED灯.蜂鸣器.普通按键.矩阵按键 今日任务完成情况 复习了C51单片机的理论知识,介绍了LED灯.蜂鸣器.按键的简单编程和仿真 ...
- Ajax学习日志(七)—— 解决低版本IE浏览器的缓存问题
Ajax入门(七) 一.解决低版本IE浏览器的缓存问题 1.1) 低版本IE浏览器的缓存问题及解决方案 1.2)需了解的知识 1.3)在app.js同目录下新建一个txt文件 1.4)在app.js创 ...
- opencv生成日志_OpenCV-Utils学习日志:VideoCapture使用样例
1.VideoCapture可以打开多种来源的数据流,但常见的是相机.视频及图像序列三类数据流: (1)打开相机数据流,需要指定相机在主机上的设备编号,若主机上只有一个相机则编号通常是0. (2)打开 ...
- Python学习日志12 - 办公自动化
Python学习日志 RBHGO的主页欢迎关注 温馨提示:创作不易,如有转载,注明出处,感谢配合~ 目录 文章目录 Python学习日志 目录 前言 进入正题 Python学习日志12课 - 办公自动 ...
最新文章
- mysql执行计划extra为null_MySQL执行计划extra解析
- 《动手玩转Arduino》——2.4 展望
- 十、JavaScript中的正则表达式(六)
- 量子计算机创新,中国式量子霸权:光子量子计算机研究创新纪-24小时-虎嗅网...
- HTTP性能测试工具wrk安装及使用
- Mysql 远程自动化备份
- 软考程序员Java答题速成_软考程序员考试下午考题解答技巧方法
- 世嘉MD游戏开发【十】:精灵动画,Sprite Animation
- 虚拟机ubantu如何扩展系统内存
- FXP登录Linux报错
- 优酷播放黑科技 | 基于WebRTC实现的直播“云多视角“技术解析
- Python教程——def()函数
- html前端几种加密方式的整理
- 解决ORA-00257:archiver error.Connect internal only, until freed
- “鸡”不可失,驱动人生助力开启“绝地求生”
- matlab模拟频谱仪,毕业设计基于MATLAB的声音信号频谱分析仪源代码V3.1(手机版)...
- 测试用例设计方法 之【等价类划分法】
- 从零开始的单片机学习(三)
- 高精度测绘行业玻璃码盘 伺服电机玻璃码盘 编码器码盘定制
- 《ROS机器人程序设计》期中测评试卷 (ROS2)
热门文章
- html+spring boot简单的ajax数据传输实现
- 10任务栏全屏时老是弹出_Deepin 15.10 发布,深度操作系统
- 2022-2028年中国美瞳行业应用市场需求及开拓机会研究报告
- Redis 笔记(04)— list类型(作为消息队列使用、在列表头部添加元素、尾部删除元素、查看列表长度、遍历指定列表区间元素、获取指定区间列表元素、阻塞式获取列表元素)
- 提高期——SLA实践指导秘籍
- intellij idea 常见遇到的问题整理
- Deformable 可变形的DETR
- Android进程间通信的方式
- Python数据挖掘:数据探索,数据清洗,异常值处理
- Multiple substitutions specified in non-positional format; did you mean to add the formatted=”false”