javascript - featherlight.js背景和关闭按钮的CSS？

我想使用一个简单的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”不起作用;（。

那是我使用的脚本：featherlight

有谁能够帮助我？

最佳答案

我建议使用Featherlight的配置选项解决该问题，而不是在其元素中添加jQuery事件。

查看Configuration section of Featherlights documentation似乎可以定义打开或关闭灯箱时要调用的函数，请参见beforeOpen，afterOpen，beforeClose和afterClose。

您可以使用元素上的数据属性来定义这些功能，例如data-featherlight-before-open，通过覆盖全局默认值，例如$.featherlight.defaults. beforeOpen，或通过将它们作为参数添加到Featherlight调用中，例如$.featherlight('#element', { beforeClose: ... });

我添加了一个小示例，该示例在打开灯箱时使用全局配置方法将文本Lightbox is closed更改为Lightbox is open。

$(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');
}

.hidden {
  display: none;
}

<link href="https://cdn.rawgit.com/noelboss/featherlight/master/release/featherlight.min.css" rel="stylesheet"/>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://cdn.rawgit.com/noelboss/featherlight/master/release/featherlight.min.js"></script>

<button id="btn">Open lightbox</button>
<p id="text">Lightbox is closed</p>

<div id="lightbox" class="hidden">
  Lightbox contents
</div>