使用facebox时, 我们要点击关闭按钮时, 遮罩层才消失, 默认是没有这个功能的.这个功能很简单,就是阻止关闭事件的触发就行了.
首先在settings加入默认值,方便我们使用的时候定置效果
settings: {
opacity : 0,
overlay : true,
modal : true,
loadingImage : '/images/facebox/loading.gif',
closeImage : '/images/facebox/closelabel.gif',
imageTypes : [ 'png', 'jpg', 'jpeg', 'gif' ],
faceboxHtml : ''
}
当modal为false时,阻击事件,实现我们的所要效果, 为true时,和本来的效果一样.
//$(document).bind('keydown.facebox', function(e) {
// if (e.keyCode == 27) $.facebox.close()
// return true
//})
if (!$.facebox.settings.modal) {
$(document).bind('keydown.facebox', function(e) {
if (e.keyCode == 27) {
$.facebox.close();
}
return true;
})
}
function showOverlay() {
if (skipOverlay()) return;
if ($('#facebox_overlay').length == 0)
$("body").append('<div id="facebox_overlay" class="facebox_hide"></div>')
$('#facebox_overlay').hide().addClass("facebox_overlayBG")
.css('opacity', $.facebox.settings.opacity)
//这句是关键要注销改成下面的
//.click(function() { $(document).trigger('close.facebox') })
.fadeIn(200);
if (!$.facebox.settings.modal){
$('#facebox_overlay').click(function() { $(document).trigger('close.facebox') });
}
return false
}
分享到:
相关推荐
在本例中,我们有一个名为"facebox.js"的文件,这正是Facebox的核心JavaScript代码。确保在页面的部分引入jQuery和Facebox的CSS文件,然后在标签的底部引入Facebox的JS文件。 ```html <!DOCTYPE html> 使用...
NULL 博文链接:https://ice-cream.iteye.com/blog/318843
接着,下载Facebox的源代码,包括`facebox.js`(JavaScript文件)和`facebox.css`(CSS文件)。在HTML文件中,将这两个文件链接到页面头部,确保在jQuery之后引入Facebox的JS文件。 2. **基本使用** Facebox的基本...
**jQuery Facebox 实例详解** ...接着,下载 Facebox 插件的压缩包,解压后将 `facebox.css` 和 `facebox.js` 文件放入你的项目目录。在页面中通过 `<link>` 和 `<script>` 标签引入这两个文件: ```html ...
Facebox的核心功能包括: 1. 图片弹出:当用户点击一个链接到图片的元素时,Facebox会将图片以全屏或半透明背景的弹出层展示,提供沉浸式的浏览体验。用户可以使用键盘的左右箭头来切换图片,或者点击弹出层外部或...
Facebox的核心功能是通过CSS和JavaScript为用户提供一个轻量级的模态对话框,当用户点击特定链接时,内容会在一个半透明的背景上全屏显示。在我们的场景中,这个功能被用来在用户点击图片后显示大图。下面我们将详细...
- **简洁的API**:Facebox1.2通过简单的CSS和JavaScript实现了弹出对话框的效果,使得开发者可以快速集成到项目中。 - **多种类型的内容支持**:它可以显示图片、纯文本、HTML代码以及通过Ajax请求获取的内容。 -...
- `js/` 目录包含JavaScript代码,如`facebox.js`可能是灯箱的核心实现。 - `css/` 目录包含CSS样式文件,如`facebox.css`用于定义灯箱的外观。 - `images/` 可能包含必要的图片资源,如箭头、关闭按钮等图标。 - `...
这些文件通常可以在下载的压缩包`facebox-master`中找到,包括`facebox.css`用于样式定义,以及`facebox.js`或`facebox.min.js`(压缩版)用于JavaScript逻辑。同时,别忘了在HTML文档头部添加对jQuery库的引用,...
一个js弹出层特效,可用于网页提示框、弹出层、登录框都可以使用,核心使用了Facebox吧,点击上面的文字就可弹出该提示框,可点击“X”号关闭该弹出层,这个层兼容各大浏览器,只是有一点还需要改进,我喜欢可以拖动...
在以上代码中,`#inputBox`是你要添加表情功能的输入框,`facebox`是表情面板的ID,`path/to/your/expressions/`是表情图片的路径,`click`函数则是当用户选择表情后执行的回调函数,用于将表情插入到文本框。...
8. **版本更新**:虽然这里提到的是"Facebox-1.2",但Facebox随着时间的发展已经有过多次更新,每个新版本通常会修复已知问题,增加新功能,提升性能,因此建议关注最新版本以获得最佳的使用体验。 总的来说,...
Facebox是基于jQuery的一个库,它为网页添加了轻量级的弹出效果,模仿了Facebook的对话框样式。下面将详细讲解Facebox_div弹出层的使用、实现原理以及相关的知识点。 1. **jQuery基础**: 在理解Facebox之前,需要...
【标题】"caffe-facebox-vs2013.7z"是一个基于C++实现的人脸检测项目,它利用了深度学习框架Caffe,并且已经适应于Visual Studio 2013开发环境。这个压缩包包含了运行和学习人脸检测技术所需的所有资源。 【描述】...
《facebox_v3_PyTorch_up:深度学习面部检测框架优化探析》 在人工智能领域,面部检测是一项至关重要的任务,广泛应用于人脸识别、视频监控、社交媒体等多个场景。PyTorch作为一款流行的深度学习框架,因其灵活性和...
Facebox通过CSS和JavaScript实现,利用jQuery选择器和事件处理来定位、显示和隐藏提示框。它通常包含一个模态背景层和一个浮于其上的内容区域,可以展示图片、HTML文本或者Ajax加载的内容。当用户触发某个事件(如...
`js`目录则可能包含jQuery库本身以及实现弹出层功能的JavaScript代码。 总的来说,这个基于jQuery的弹出层是一个结合了JavaScript动态效果和CSS样式的实用工具,它通过简单的API调用和样式调整,为网页增加了丰富的...
在这个例子中,`#inputBox`是你要添加表情功能的输入元素的ID,`'facebox'`是表情面板的ID,`'path/to/qqfaces/'`是表情图片的路径。 4. **自定义表情**:如果需要,你可以根据自己的需求调整表情列表,或者替换为...
jQuery,作为一款强大的JavaScript库,为开发者提供了丰富的功能和便捷的API,使得网页动态效果的实现变得更加简单。本文将深入探讨一个特别的应用——"jQuery图片人脸识别代码",它能够自动识别图片中的人物脸部并...