featherlight.js背景&关闭按钮css?

时间:2014-12-28 09:35:02

标签: javascript css featherlight.js

我想使用一个简单的js来停用并激活html "body"的溢出,如下所示:

$('.my_link').click(function(){
    $('body').css('overflow-y', 'hidden');
});

$('.featherlight_background & featherlight_close_button').click(function(){
    $('body').css('overflow-y', 'scroll');
});

但是我找不到“featherlight_background”和“featherlight_close_button”的css名称 - “。”。featherlight:last-of-type“和”.featherlight-close-icon“不起作用;(。< / p>

这是我使用的脚本:featherlight

有人能帮助我吗?

1 个答案:

答案 0 :(得分:5)

我建议使用Featherlight的配置选项解决它,而不是将jQuery事件添加到其元素中。

查看Configuration section of Featherlights documentation,您可以定义在打开或关闭灯箱时要调用的函数,请参阅beforeOpenafterOpenbeforeClose和{{ 1}}。

您可以使用元素上的数据属性定义这些函数,例如afterClose,通过覆盖全局默认值,例如data-featherlight-before-open,或者将它们作为参数添加到您的羽毛灯调用中,例如$.featherlight.defaults. beforeOpen

我已经添加了一个小示例,该示例使用全局配置方法在打开灯箱时将文本$.featherlight('#element', { beforeClose: ... });更改为Lightbox is closed

&#13;
&#13;
Lightbox is open
&#13;
$(function() {
  $('#btn').featherlight('#lightbox');
  
  $.featherlight.defaults.beforeOpen = setLightboxOpen;
  $.featherlight.defaults.afterClose = setLightboxClosed;
});

function setLightboxOpen() {
  $('#text').text('Lightbox is open');
}

function setLightboxClosed() {
  $('#text').text('Lightbox is closed');
}
&#13;
.hidden {
  display: none;
}
&#13;
&#13;
&#13;