`

使用facebox弹出层

阅读更多
<html>
<head>

<link href="${cssPath}/facebox.css" rel="stylesheet" type="text/css" />

<script language="javascript" type="text/javascript"
	src="${jsPath}/jquery-1.3.2.js"></script>
<script language="javascript" type="text/javascript"
	src="${jsPath}/facebox.js"></script>


<script language="javascript" type="text/javascript">
	jQuery(document).ready(function($) {
		
		$('a[rel*=facebox]').facebox({closeResults:1}); 
        }
</script>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" class="listData">
	<tbody>
		<tr>
			<th scope="col">创建用户</th>
			<th scope="col" width="500">模板消息</th>
			<th scope="col">操作</th>
		</tr>
		<c:forEach items="${smsTemplatesList}" var="smsTemplates"
			varStatus="status_smsTemplate">
			<tr>
				<td>${smsTemplates.createUser.name}</td>
				<td>${smsTemplates.message}</td>
				<td><a id="${smsTemplates.id}" href="sms.lps?method=toTemplatesEdit&smsTemplates.id=${smsTemplates.id}"  rel="facebox" >修改</a></td>
			</tr>
		</c:forEach>
	</tbody>
</table>

<a href="sms.lps?method=toTemplatesAdd" id="add" rel="facebox">添加短信模板</a>  
</body>
</html>

 上面有一些JSTL的动态代码,我没有去掉

 

给要在弹出层显示数据的请求<a>都加上

rel="facebox"

这种主要是给他们一个集体标识,好用JQUERY找到他们,然后在页面加载后调用代码就OK了

jQuery(document).ready(function($) {
		
		$('a[rel*=facebox]').facebox({closeResults:1}); 
        }

 

如要进行手动关闭,调用

$.facebox.close();
 

 

 

这里有个问题,我多给了一个参数,这个参数在官方下载的角本文件是无效的facebox进行了一个小小的修改,让弹出层的关闭方式可以进行一些简单的控制

 

在原文件中的90行添加

 closeResults : 0,

 

在原文件中的299行添加

 if ($.facebox.settings.closeResults == 0)  
      $('#facebox_overlay').click(function() { $(document).trigger('close.facebox') })

添加一种属性,可设置弹出层关闭效果,现可通过closeResults属性,
当不进行设置或等于0时,鼠标点击弹出层外面时,弹出层关闭,
当设置为1时,鼠标点出弹出层外面时,不操作,只可点击设置好的图标和按钮才可关闭 

 

 

 

附件中是我修改后的文件

 

 

分享到:
评论

相关推荐

    Acronis Backup:Acronis备份策略设计原理.docx

    Acronis Backup:Acronis备份策略设计原理.docx

    phpEasyVCS-2.0.zip

    phpEasyVCS-2.0.zip

    2023-04-06-项目笔记 - 第三百五十一阶段 - 4.4.2.349全局变量的作用域-349 -2025.12.18

    2023-04-06-项目笔记-第三百五十一阶段-课前小分享_小分享1.坚持提交gitee 小分享2.作业中提交代码 小分享3.写代码注意代码风格 4.3.1变量的使用 4.4变量的作用域与生命周期 4.4.1局部变量的作用域 4.4.2全局变量的作用域 4.4.2.1全局变量的作用域_1 4.4.2.349局变量的作用域_349- 2024-12-18

    【BP回归预测】基于matlab非洲秃鹫算法优化BP神经网络AVOA-BP光伏数据预测(多输入单输出)【Matlab仿真 5152期】.zip

    CSDN Matlab研究室上传的资料均有对应的仿真结果图,仿真结果图均是完整代码运行得出,完整代码亲测可用,适合小白; 1、完整的代码压缩包内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主或扫描博客文章底部QQ名片; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

    基于java的狄氏皮草服装店销售管理系统源代码(完整前后端+mysql+说明文档+LW).zip

    用户管理: 能够完成用户基本信息录入的注册和用户基本信息的修改。 管理员管理: 能够完成管理员对网站的商品信息管理(商品添加、商品审查)、会员管理(会员审查)、网站信息管理(新闻添加、修改删除、公告设置),以及常规设置(广告添加,友情链接)的功能。 搜索功能: 能过电子商品的名称进行搜索。 查询功能: 能够通过查看购物车对所选商品进行确定、挑选。 环境说明: 开发语言:Java,jsp JDK版本:JDK1.8 数据库:mysql 5.7 数据库工具:Navicat11 开发软件:eclipse/idea 部署容器:tomcat

    BLE蓝牙单片机CC2540、CC2541带OSAL操作系统的项目实战开发例程-蓝牙游戏手柄例程(空中鼠标键盘、体感游戏手柄).zip

    1、嵌入式物联网单片机项目开发例程,简单、方便、好用,节省开发时间。 2、代码使用IAR软件开发,当前在CC2540/CC2541上运行,如果是其他型号芯片,请自行调整。 3、软件下载时,请注意接上硬件,并确认烧录器连接正常。 4、有偿指导v:wulianjishu666; 5、如果接入其他传感器,请查看账号发布的其他资料。 6、单片机与模块的接线,在代码当中均有定义,请自行对照。 7、若硬件有差异,请根据自身情况调整代码,程序仅供参考学习。 8、代码有注释说明,请耐心阅读。 9、例程具有一定专业性,非专业人士请谨慎操作。

    【BP回归预测】基于matlab哈里斯鹰算法优化BP神经网络HHO-BP光伏数据预测(多输入单输出)【Matlab仿真 5155期】.zip

    CSDN Matlab研究室上传的资料均有对应的仿真结果图,仿真结果图均是完整代码运行得出,完整代码亲测可用,适合小白; 1、完整的代码压缩包内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主或扫描博客文章底部QQ名片; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

    【BP回归预测】基于matlab飞蛾扑火算法优化BP神经网络MFO-BP光伏数据预测(多输入单输出)【Matlab仿真 5151期】.zip

    CSDN Matlab研究室上传的资料均有对应的仿真结果图,仿真结果图均是完整代码运行得出,完整代码亲测可用,适合小白; 1、完整的代码压缩包内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主或扫描博客文章底部QQ名片; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

    IO总结总结总结总结总结

    IO总结总结总结总结总结

    基于java的人人乐超市采购管理系统源代码(完整前后端+mysql+说明文档+LW).zip

    系统能够对客户信息管理、订单管理、商品信息管理、供应商管理、库存管理,系统用户管理等信息提供存储、更新、查询、统计的功能。 环境说明: 开发语言:Java,jsp JDK版本:JDK1.8 数据库:mysql 5.7 数据库工具:Navicat11 开发软件:eclipse/idea 部署容器:tomcat

    基于java的视频教学考试网源代码(完整前后端+mysql+说明文档+LW).zip

    前台模块: 站内新闻:发布与视频教学相关的新闻和动态。 视频学习:提供视频教学内容,供用户学习。 在线留言:用户可以在线提交留言或反馈。 用户注册:允许新用户注册成为网站的会员。 在线论坛:提供一个在线讨论的平台。 资料下载:提供学习资料或其他相关文件的下载服务。 管理员模块: 系统用户管理:管理系统用户的账户信息。 注册用户管理:管理注册用户的资料和信息。 教师信息管理:管理教师的资料和信息。 站内新闻管理:管理网站新闻内容的发布和更新。 课程信息:管理课程的相关信息。 资料下载管理:管理可供下载的资料。 论坛管理:管理在线论坛的内容和用户互动。 注册用户模块: 教师资料修改:教师可以修改自己的个人信息。 作业发布管理:用户可以发布作业或相关任务。 在线资料下载:注册用户可以下载在线资料。 学生资料管理:学生可以管理自己的资料。 学生下载作业:学生可以下载教师发布的作业。 环境说明: 开发语言:Java,jsp JDK版本:JDK1.8 数据库:mysql 5.7 数据库工具:Navicat11 开发软件:eclipse/idea 部署容器:tomcat

    汉普美的ERP简介、实施、应用.ppt

    汉普美的ERP简介、实施、应用.ppt

    深圳混泥土搅拌站资金、现金、费用管理规定.docx

    深圳混泥土搅拌站资金、现金、费用管理规定

    worldgroup manager(瀛海威时空客户端英文原版)

    98年的telnetBBS软件,配合worldgroup server使用(16位),是瀛海威时空客户端的英文原版。

    5aaaaaaaaaaaaaaaaaaaaaa

    5aaaaaaaaaaaaaaaaaaaaaa

    基础的Go微服务框架.zip

    这个项目是一个基础的Go微服务框架,适合作为微服务架构的学习项目。希望这个项目能帮助你入门Go语言的微服务开发!

    2024-2030中国核苷酸市场现状研究分析与发展前景预测报告 Sample Yuan.pdf

    此为报告样本,完整报告的框架结构

    传送带中大块煤识别检测数据集,使用coco json格式对792张图片标注

    传送带中大块煤识别检测数据集,使用coco json格式对792张图片标注,标注图片和标注信息可参考博文:https://backend.blog.csdn.net/article/details/144513245

    DLLDirectX文件快速修复工具

    此工具能快速有效的修复系统缺失的DLL和DirectX文件

    计算机组成原理课程设计(模型机).doc

    计算机组成原理课程设计(模型机).doc

Global site tag (gtag.js) - Google Analytics