Question

我想使用一个简单的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

有人能帮助我吗？

Answer 1

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

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

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

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

＆＃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;

featherlight.js背景＆amp;关闭按钮css？

1 个答案: