`

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

 

 

 

附件中是我修改后的文件

 

 

分享到:
评论

相关推荐

    facebox_div弹出层

    要触发Facebox弹出层,可以将链接或按钮的`rel`属性设置为`facebox`,例如:`&lt;a href="your_content.html" rel="facebox"&gt;打开弹出层&lt;/a&gt;`。点击这个链接时,Facebox会加载指定URL的内容并显示。 6. **加载动态...

    jQuery Facebox lightbox效果华丽弹出层插件(灰色与蓝色).zip

    总的来说,jQuery Facebox是一个强大且易于使用的弹出层插件,它能为网页增添互动性和美观性,是网页设计和开发者的得力工具。通过熟练掌握和应用Facebox,可以提升用户体验,使网站更加吸引人。

    Facebox核心的网页提示js弹出层特效.rar

    一个js弹出层特效,可用于网页提示框、弹出层、登录框都可以使用,核心使用了Facebox吧,点击上面的文字就可弹出该提示框,可点击“X”号关闭该弹出层,这个层兼容各大浏览器,只是有一点还需要改进,我喜欢可以拖动...

    基于jQuery的弹出层

    在这个案例中,它使用了流行的JavaScript库jQuery,来实现动态、优雅的弹出层效果。 jQuery是一个轻量级的JavaScript库,简化了HTML文档遍历、事件处理、动画以及Ajax交互。它通过提供简洁的API,使得开发者能够...

    jquery 弹出层插件收藏

    本文将深入探讨jQuery弹出层插件,包括thickbox、colorbox、facebox、jqueryalert和shadowbox,这些都是用于创建美观、交互性强的弹出窗口的优秀工具。 首先,我们来看thickbox。Thickbox是一款基于jQuery的全屏弹...

    Facebox 基于jQuery的华丽弹出层插件

    内容索引:脚本资源,jQuery,facebox Facebox 基于jQuery的一款带动画特效的华丽弹出层插件,当然华丽还是需要你去实现的,它只提供一些方法和效果,比如渐入渐出显示层,折叠展开等,本例这个不很华丽,只是为了测试...

    Jquery ThickBox插件使用心得(不建议使用)

    但是,这也导致了当弹出层中包含表格布局时,很容易受到facebox样式的干扰,需要额外的样式重置工作。 ThickBox插件的基本使用方法包括: - 单张图片展示:通过给链接元素添加class="thickbox"属性,并指定要展示...

    Jquery facebook 提示框

    Facebox提供了一个简洁的API,允许开发者轻松地在网页上添加类似于Facebook的弹出式对话框。 1. **Facebox的实现原理** Facebox通过CSS和JavaScript实现,利用jQuery选择器和事件处理来定位、显示和隐藏提示框。它...

    JavaScript_jQuery内置的facebook风格灯箱.zip

    首先,灯箱(Lightbox)是一种在网页上展示大图或多媒体内容的弹出式界面,通常用于图片预览或视频播放。Facebook的灯箱设计简洁且用户体验良好,用户可以在不离开当前页面的情况下查看或互动。 要创建一个Facebook...

    仿facebook的对话框

    Facebox是一个流行的jQuery插件,它允许开发者将链接、图像或HTML内容包装在一个弹出的对话框中。这个1.1版本可能包含了对原版Facebox的改进,比如修复了已知问题,增加了新特性,或者优化了性能。 使用Facebox 1.1...

    编程开发-综合控件-jquery.qqFace.js.zip

    id : 'facebox', // 弹出层ID path : 'path/to/your/expressions/', // 表情存放路径 click : function(iframeId, imgSrc){ // 当点击某个表情时触发,可以在这里处理插入表情的逻辑 $('#inputBox').val($('#...

    Jquery特效大全

    Facebox 是一个轻量级的 jQuery 弹出框插件。它允许在页面上显示带有半透明遮罩层的弹窗,通常用于显示重要的通知或警告信息。 **2.2 Simple Modal** Simple Modal 是另一个简单的 jQuery 模态对话框插件。它提供...

Global site tag (gtag.js) - Google Analytics