<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时,鼠标点出弹出层外面时,不操作,只可点击设置好的图标和按钮才可关闭
附件中是我修改后的文件