전체 화면 오버레이 표시/숨기기

Question

필자가하려고하는 것을 보여주기 위해 피들을 설정했습니다.

http://jsfiddle.net/AndyMP/nNUkr/

전체 화면 오버레이가 나타납니다하지만 난 그것을 원하는대로 (클릭하면) 그것은에 사라지지 않습니다.

<div id="fullscreen" class="fullscreen_hide"></div> 

<div id="button" class="button"></div> 

CSS

.button{ 
    position:absolute; 
    z-index:2000; 
    height:100px; 
    width:200px; 
    background:red; 
    float:left; 
} 

.fullscreen_hide{ 
    position:absolute; 
    z-index:1000; 
    opacity:0; 
    top:0; 
    bottom:0; 
    right:0; 
    left:0; 
    background:#141414; 
} 
.fullscreen_show{ 
    position:absolute; 
    z-index:3000; 
    opacity:1; 
    top:0; 
    bottom:0; 
    right:0; 
    left:0; 
    background:#141414; 
} 

코드

$('.button').click(function(){ 
    $(this).siblings().addClass('fullscreen_show'); 
}); 
$('.fullscreen_show').click(function(){ 
    $(this).siblings().removeClass('fullscreen_show'); 
}); 

Answer 1

Working Demo

$('.button').click(function(){ 
    $(this).siblings().addClass('fullscreen_show'); 
}); 

// use .on() to account for .fullscreen_show elements created later 
$(document).on('click', '.fullscreen_show', function(){ 

    // removed .siblings() to include just the clicked div and not its siblings alone 
    $(this).removeClass('fullscreen_show'); 
}); 

코드 2 문제가 있었다 :

은

1. $(this).siblings().removeClass('fullscreen_show'); - $(this).siblings()에는 클릭 된 div 자체가 포함되지 않습니다. 클릭 한 div의 형제 중 fullscreen_show 클래스 만 제거합니다.

2. 바인딩 시점에서 fullscreen_show 클래스의 요소가 없습니다. 이에 대응하기 위해, 당신은 클래스와 설명에 대한 fullscreen_show