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

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”不起作用 ;(.

这是我使用的脚本:featherlight

谁能帮帮我？

Answer 1

我建议使用 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>