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를 이름을 finde 해달라고 - .. . ".featherlight : 마지막으로 형"과 ".featherlight-근접 아이콘"작업을 해달라고 (내가 작업 스크립트 것은 이것이

:.? featherlight이

아무도 나를 도울 수를

Answer 1

jQuery 이벤트를 요소에 추가하는 대신 Featherlight 구성 옵션을 사용하여 해결하는 것이 좋습니다.

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>