<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时,鼠标点出弹出层外面时,不操作,只可点击设置好的图标和按钮才可关闭
附件中是我修改后的文件
分享到:
相关推荐
要触发Facebox弹出层,可以将链接或按钮的`rel`属性设置为`facebox`,例如:`<a href="your_content.html" rel="facebox">打开弹出层</a>`。点击这个链接时,Facebox会加载指定URL的内容并显示。 6. **加载动态...
总的来说,jQuery Facebox是一个强大且易于使用的弹出层插件,它能为网页增添互动性和美观性,是网页设计和开发者的得力工具。通过熟练掌握和应用Facebox,可以提升用户体验,使网站更加吸引人。
一个js弹出层特效,可用于网页提示框、弹出层、登录框都可以使用,核心使用了Facebox吧,点击上面的文字就可弹出该提示框,可点击“X”号关闭该弹出层,这个层兼容各大浏览器,只是有一点还需要改进,我喜欢可以拖动...
在这个案例中,它使用了流行的JavaScript库jQuery,来实现动态、优雅的弹出层效果。 jQuery是一个轻量级的JavaScript库,简化了HTML文档遍历、事件处理、动画以及Ajax交互。它通过提供简洁的API,使得开发者能够...
本文将深入探讨jQuery弹出层插件,包括thickbox、colorbox、facebox、jqueryalert和shadowbox,这些都是用于创建美观、交互性强的弹出窗口的优秀工具。 首先,我们来看thickbox。Thickbox是一款基于jQuery的全屏弹...
内容索引:脚本资源,jQuery,facebox Facebox 基于jQuery的一款带动画特效的华丽弹出层插件,当然华丽还是需要你去实现的,它只提供一些方法和效果,比如渐入渐出显示层,折叠展开等,本例这个不很华丽,只是为了测试...
但是,这也导致了当弹出层中包含表格布局时,很容易受到facebox样式的干扰,需要额外的样式重置工作。 ThickBox插件的基本使用方法包括: - 单张图片展示:通过给链接元素添加class="thickbox"属性,并指定要展示...
Facebox提供了一个简洁的API,允许开发者轻松地在网页上添加类似于Facebook的弹出式对话框。 1. **Facebox的实现原理** Facebox通过CSS和JavaScript实现,利用jQuery选择器和事件处理来定位、显示和隐藏提示框。它...
首先,灯箱(Lightbox)是一种在网页上展示大图或多媒体内容的弹出式界面,通常用于图片预览或视频播放。Facebook的灯箱设计简洁且用户体验良好,用户可以在不离开当前页面的情况下查看或互动。 要创建一个Facebook...
Facebox是一个流行的jQuery插件,它允许开发者将链接、图像或HTML内容包装在一个弹出的对话框中。这个1.1版本可能包含了对原版Facebox的改进,比如修复了已知问题,增加了新特性,或者优化了性能。 使用Facebox 1.1...
id : 'facebox', // 弹出层ID path : 'path/to/your/expressions/', // 表情存放路径 click : function(iframeId, imgSrc){ // 当点击某个表情时触发,可以在这里处理插入表情的逻辑 $('#inputBox').val($('#...
Facebox 是一个轻量级的 jQuery 弹出框插件。它允许在页面上显示带有半透明遮罩层的弹窗,通常用于显示重要的通知或警告信息。 **2.2 Simple Modal** Simple Modal 是另一个简单的 jQuery 模态对话框插件。它提供...