Afficher/masquer une superposition en plein écran

Question

J'ai mis en place un violon pour montrer ce que j'essaie de faire.

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

La superposition plein écran apparaît, mais il ne disparaît pas comme je veux qu'il (quand on clique dessus).

<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; 
} 

code

$('.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'); 
}); 

Il y avait 2 problèmes avec votre code:

1. $(this).siblings().removeClass('fullscreen_show'); - $(this).siblings() n'inclut pas le div cliqué lui-même. Il supprimera la classe fullscreen_showseulement des frères et sœurs div cliqués. Au point de liaison, il n'y a pas d'éléments de classe fullscreen_show. Pour contrer cela, vous pouvez utiliser .on() sur un élément de niveau supérieur pour inclure des éléments dynamiquement créés avec la classe fullscreen_show