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事件添加到其元素中.

纵观Featherlights文档的配置部分,似乎可以定义收藏夹被打开或关闭时要调用的函数,见beforeOpen,afterOpen,beforeClose和afterClose.

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