ModalPopupExtender使用技巧( operate ModalPopupExtender by JavaScript)
ModalPopupExtender是个非常好用的AJAX控件, 网上有很多教程,但大多没有提起它的一些使用技巧:
1.简单应用:
常用属性:
TargetControlID:用于触发弹出面板的控件。
OkControlID:弹出面板中的确认按钮,用于确认新的样式。
OnOkScript:当单击确认按钮后,关闭样式面板后,执行脚本。
CancelControlID:样式面板中的取消按钮,用于取消应用样式。
PopupDragHandleControlID:样式面板中用于触发面板的控件。
DropShadow:样式面板是否有阴影。值为True,则有阴影;值为False,则没有阴影。
BackgroundCssClass:样式面板中应用的css样式。
最简单的应用示例:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default6.aspx.cs" Inherits="Default6" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:Button ID="Button1" runat="server" Text="Button" />
<cc1:ModalPopupExtender ID="Button1_ModalPopupExtender" runat="server"
DynamicServicePath="" Enabled="True" TargetControlID="Button1" PopupControlID="Panel1">
</cc1:ModalPopupExtender>
</div>
<asp:Panel ID="Panel1" runat="server" Height="176px" Width="141px">
</asp:Panel>
</form>
</body>
</html>
2.半透明阴影遮罩
要为ModalPopupExtender添加半透明阴影,就像官方网站上的案例一样,需要定义一个CSS类,并指派到BackgroundCssClass属性上
半透明背景css可以如下:
<style type="text/css">
.bg
{
position: absolute;
z-index: 100;
top: 0px;
left: 0px;
background-color: #000;
filter: alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}
</style>
3.JavaScript 控制
如果我们需要用JavaScript控制弹出层的 show/hide ,使用以下代码即可:
$find('Panel1').show()
前提是,PopupControlID和BehaviorID都要是Panel1
完整代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="modalpopup.aspx.cs" Inherits="modalpopup" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
.bg
{
position: absolute;
z-index: 100;
top: 0px;
left: 0px;
background-color: #000;
filter: alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}
</style>
<script language="javascript" type="text/javascript">
// <!CDATA[
function Button2_onclick() {
// $find('Panel1').hide()
$find('Panel1').show()
}
// ]]>
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
</div>
<p>
</p>
<p>
<asp:Button ID="Button1" runat="server" Text="Button" />
</p>
<asp:Panel ID="Panel1" runat="server" Height="156px" Width="127px">
<asp:Image ID="Image1" runat="server" Height="149px" ImageUrl="~/head_7953l61.jpg"
Width="123px" />
</asp:Panel>
<cc1:ModalPopupExtender ID="Panel1_ModalPopupExtender" runat="server" DynamicServicePath=""
BehaviorID="Panel1" BackgroundCssClass="bg" PopupControlID="Panel1" Enabled="True" TargetControlID="Button1">
</cc1:ModalPopupExtender>
</form>
<p>
<input id="Button2" type="button" value="button" onclick="return Button2_onclick()" /></p>
</body>
</html>
转载于:https://www.cnblogs.com/blodfox777/archive/2008/08/27/1277785.html
ModalPopupExtender使用技巧( operate ModalPopupExtender by JavaScript)相关推荐
- [译] 新手和老手都将受益的JavaScript小技巧
这篇文章会分享一些鲜为人知但却很强大的JavaScript技巧, 各个级别的JavaScript开发者都会从中受益. 1. 用数组的length属性清空数组 我们知道在JS中对象类型是按引用传递的, ...
- javascript取随机数_查缺补漏一些 Javascript 的小技巧笔记
前言 这篇文章的话,分享一些最近使用React开发项目时,用到的小技巧,其实也算是JavaScript中的一些技巧吧,内容主要有一下几点? 产生随机不重复id 快速取整数 合理布局样式 字符串xml的 ...
- JavaScript实用技巧(一)
JavaScript 的成功让人津津乐道,为 Web 网页编写 JavaScript 代码已经是所有 Web 设计师的基本功,这门有趣的语言蕴藏着许多不为人熟知的东西,即使多年的 JavaScript ...
- [转]那些相见恨晚的 JavaScript 技巧
JavaScript 的成功让人津津乐道,为 Web 网页编写 JavaScript 代码已经是所有 Web 设计师的基本功,这门有趣的语言蕴藏着许多不为人熟知的东西,即使多年的 JavaScript ...
- 用JavaScript获取页面上被选中的文字的技巧
这里介绍的一个小技巧是如何用JavaScript获取页面上被选中的文字的方法.最关键的JavaScript API是: event.selection = window.getSelection(); ...
- 10个JavaScript开发小技巧
"梦想天空"(网名)曾发表一篇博文,为我们介绍了10个JavaScript开发小技巧,现转载于此,供大家学习: 尽管我使用Javascript来做开发有很多年了,但它常有一些让我很 ...
- 不为人知的 JavaScript 技巧
大家好,我是 漫步,1024 程序员节已过,昨天抽了100个红包,你有参与吗?没有的话也没关系,下次还有机会哦,记得关注我并设为星标. 今天分享几个少见却很有用的 JS 技巧. 什么是 JavaScr ...
- js技巧--转义符\的妙用(转)
通常,我们在动态给定一个container的innerHTML时,通常是样做的: <div id="divc" /> <SCRIPT LANGUAGE=" ...
- 如何在JavaScript中实现堆栈和队列?
本文翻译自:How do you implement a Stack and a Queue in JavaScript? What is the best way to implement a St ...
最新文章
- 紫书搜索 习题7-8 UVA - 12107 Digit Puzzle IDA*迭代加深搜索
- 利用指针编程实现:删除一个字符串中的所有空格 c语言,C语言必考100题解析汇报...
- tf.logging.set_verbosity (tf.logging.INFO)
- c/c++入门教程 - 3 职工管理系统 完整代码
- iOS开发进阶教程【第一季小试牛刀】
- centos7执行 wget命令: command not found的两种解决方法
- bzoj 4561: [JLoi2016]圆的异或并(扫描线+set)
- Date对象中的方法
- 2021-04-26
- js 导出Excel
- aws的sdk异常 unable to execute HTTP ec2-north-1.amazonaws
- java.net.MalformedURLException: unknown protocol: jrt 异常解决方法
- 怎么看计算机内存和独显,电脑独立显卡或集成显卡的显存大小怎么查看?
- python下对bin文件的处理
- 执行方案(Command)
- 申报高新技术企业的好处
- Visual C++网络编程经典案例详解 第5章 网页浏览器 CHtmlView类 查看源文件
- 西南民族大学第十届校赛(同步赛)ABCEHJM题解
- 使用皮皮影院搭建电影展
- 1.HTML+CSS3 —— To:Kobe——彩虹渐变
热门文章
- git统计每个人的代码行数_程序员实用工具,推荐一款代码统计神器GitStats
- 如何使用ZEROBRANE STUDIO远程调试COCOS2D-X的LUA脚本
- PhoneGap跨平台移动应用开发框架体验
- 滇西应用技术大学有没有计算机专业,学校介绍
- python登录网页版易信_易信网页版下载|易信网页版登陆客户端官方最新版 2.1.1103.0 - 系统天堂...
- vim写python_用 Vim 写 Python 的最佳实践
- Hadoop不同版本数据传输distcp问题设置
- 参数是html代码,一些html标签的参数messup html/php代码
- java swing 删除事件_java swing清除事件队列
- python创建虚拟环境打包_用虚拟环境保存库文件--Python打包-阿里云开发者社区