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名称.

这就是我使用的脚本：羽光

有人能帮我吗？

Answer 1

我建议使用羽毛光的配置选项来解决这个问题，而不是将jQuery事件添加到元素中。

查看Featherlight文档的配置部分，您似乎可以定义一个在打开或关闭lightbox时调用的函数，请参阅beforeOpen、afterOpen、beforeClose和afterClose。

您可以使用元素上的数据属性(例如data-featherlight-before-open )定义这些函数，方法是重写全局默认值(例如$.featherlight.defaults. beforeOpen )，或者将它们作为参数添加到轻量级调用(例如$.featherlight('#element', { beforeClose: ... }); )中。

我添加了一个小示例，它使用全局配置方法在打开lightbox时将文本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>

​