使用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> 使用...
8. **版本更新**:虽然这里提到的是"Facebox-1.2",但Facebox随着时间的发展已经有过多次更新,每个新版本通常会修复已知问题,增加新功能,提升性能,因此建议关注最新版本以获得最佳的使用体验。 总的来说,...
Facebox通过CSS和JavaScript实现,利用jQuery选择器和事件处理来定位、显示和隐藏提示框。它通常包含一个模态背景层和一个浮于其上的内容区域,可以展示图片、HTML文本或者Ajax加载的内容。当用户触发某个事件(如...
JavaScript(简称JS)是一种轻量级的编程语言,广泛用于网页和网络应用的开发,尤其在用户交互方面表现得非常出色。"漂亮的js弹出框"是一个关于利用JavaScript实现美观弹出框的资源,它提供了两种不同的展示方式:...
1. **快速集成**:通过引入jQuery和Facebox的JavaScript和CSS文件,就能在网站中启用对话框功能。 2. **定制样式**:尽管Facebox提供了一套基础样式,但开发者可以根据需求调整CSS,使其更符合网站的视觉风格。 3. *...
- **功能:** 为JavaScript添加面向方面编程特性。 - **特点:** 可以为函数添加Before、After与Around等Advice。 - **适用场景:** 需要增强代码逻辑控制能力的项目。 2. **Facebox:** - **功能:** 展示图片、div...
- 易于扩展,可以通过添加新方法来增加功能。 ##### 8. jQuery.UI Messenger "Outlook-like message notification Widget" - **简介**:类似于Outlook的消息通知插件。 - **特点**: - 支持多种通知类型。 - ...
虽然ThickBox在使用上可以很方便地实现功能,但是不被推荐使用的理由还包括可能存在的安全漏洞,以及在现代前端开发中,可能无法很好地与各种新的浏览器特性和框架兼容。 综上所述,尽管ThickBox在某些简单需求下...
这里提到的是模仿 ext.js(一个流行的 JavaScript 库)中的 tab 选项卡功能。这种效果通常应用于网站的顶部导航区域,用户可以通过点击不同的标签来切换不同的页面或视图。jQuery 版本的 tab 选项卡可以轻松集成到...