facebox.js 添加新功能

最新推荐文章于 2019-06-30 09:20:54 发布

最新推荐文章于 2019-06-30 09:20:54 发布 · 266 阅读

文章标签：

#CSS

jquery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何修改Facebox插件的行为，通过调整设置来改变模态框的关闭方式。当modal属性设置为false时，点击遮罩层将触发关闭事件；而设置为true时，则保持原有功能。

使用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
}