使用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时,鼠标点出弹出层外面时,不操作,只可点击设置好的图标和按钮才可关闭 

 

 

 

附件中是我修改后的文件

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值