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