`
fei1985
  • 浏览: 35924 次
  • 性别: Icon_minigender_1
  • 来自: 济南
最近访客 更多访客>>
社区版块
存档分类
最新评论

facebox.js 添加新功能

CSS 
阅读更多

使用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弹出层

    在本例中,我们有一个名为"facebox.js"的文件,这正是Facebox的核心JavaScript代码。确保在页面的部分引入jQuery和Facebox的CSS文件,然后在标签的底部引入Facebox的JS文件。 ```html &lt;!DOCTYPE html&gt; 使用...

    facebox-1.2

    8. **版本更新**:虽然这里提到的是"Facebox-1.2",但Facebox随着时间的发展已经有过多次更新,每个新版本通常会修复已知问题,增加新功能,提升性能,因此建议关注最新版本以获得最佳的使用体验。 总的来说,...

    Jquery facebook 提示框

    Facebox通过CSS和JavaScript实现,利用jQuery选择器和事件处理来定位、显示和隐藏提示框。它通常包含一个模态背景层和一个浮于其上的内容区域,可以展示图片、HTML文本或者Ajax加载的内容。当用户触发某个事件(如...

    漂亮的js弹出框

    JavaScript(简称JS)是一种轻量级的编程语言,广泛用于网页和网络应用的开发,尤其在用户交互方面表现得非常出色。"漂亮的js弹出框"是一个关于利用JavaScript实现美观弹出框的资源,它提供了两种不同的展示方式:...

    仿facebook的对话框

    1. **快速集成**:通过引入jQuery和Facebox的JavaScript和CSS文件,就能在网站中启用对话框功能。 2. **定制样式**:尽管Facebox提供了一套基础样式,但开发者可以根据需求调整CSS,使其更符合网站的视觉风格。 3. *...

    jQuery 插件大全

    - **功能:** 为JavaScript添加面向方面编程特性。 - **特点:** 可以为函数添加Before、After与Around等Advice。 - **适用场景:** 需要增强代码逻辑控制能力的项目。 2. **Facebox:** - **功能:** 展示图片、div...

    Jquery特效--最好的设计

    - 易于扩展,可以通过添加新方法来增加功能。 ##### 8. jQuery.UI Messenger "Outlook-like message notification Widget" - **简介**:类似于Outlook的消息通知插件。 - **特点**: - 支持多种通知类型。 - ...

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

    虽然ThickBox在使用上可以很方便地实现功能,但是不被推荐使用的理由还包括可能存在的安全漏洞,以及在现代前端开发中,可能无法很好地与各种新的浏览器特性和框架兼容。 综上所述,尽管ThickBox在某些简单需求下...

    Jquery特效大全

    这里提到的是模仿 ext.js(一个流行的 JavaScript 库)中的 tab 选项卡功能。这种效果通常应用于网站的顶部导航区域,用户可以通过点击不同的标签来切换不同的页面或视图。jQuery 版本的 tab 选项卡可以轻松集成到...

Global site tag (gtag.js) - Google Analytics