featherlight.js background & close button css?

featherlight.js background & close button css?

本文关键字：close button css amp js background featherlight      更新时间：2023-09-26

我想使用一个简单的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的配置选项来解决它，而不是将jQuery事件添加到其元素中。

查看 Featherlight 文档的配置部分，似乎您可以定义一个在灯箱打开或关闭时要调用的函数，请参阅 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>

相关文章：