我想使用一个简单的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“不起作用;(。< / p>
这是我使用的脚本:featherlight
有人能帮助我吗?
答案 0 :(得分:5)
我建议使用Featherlight的配置选项解决它,而不是将jQuery事件添加到其元素中。
查看Configuration section of Featherlights documentation,您可以定义在打开或关闭灯箱时要调用的函数,请参阅beforeOpen
,afterOpen
,beforeClose
和{{ 1}}。
您可以使用元素上的数据属性定义这些函数,例如afterClose
,通过覆盖全局默认值,例如data-featherlight-before-open
,或者将它们作为参数添加到您的羽毛灯调用中,例如$.featherlight.defaults. beforeOpen
我已经添加了一个小示例,该示例使用全局配置方法在打开灯箱时将文本$.featherlight('#element', { beforeClose: ... });
更改为Lightbox is closed
。
Lightbox is open
&#13;
$(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');
}
&#13;
.hidden {
display: none;
}
&#13;