Comment afficher une div sur une autre après avoir cliqué

Question

Je veux une sorte de superposition après avoir cliqué sur un bouton. Ceci est le résultat avant le triangle en bas est cliqué:

Puis après on clique dessus, il devrait ressembler à ceci:

Je me sens cela peut être fait avec jQuery, mais je ne l'ai pas encore compris. Quelqu'un peut me diriger dans la bonne direction?

Answer 1

En réponse Ballpark (basée sur quelle information a été donnée ...), je suggère faire une position absolue (et de taille!) Div qui apparaît sur le dessus du contenu (ne vous inquiétez pas à propos du spectacle/bit cacher tout de suite ...

une fois que vous avez que cloués et où vous le voulez

alors un événement clic en utilisant:.

$('selector').toggle() 

va gérer la projection et hidi ng de celui-ci. Pour le démarrer caché, pour le CSS de l'élément, donnez-lui un affichage: none; - Jquery ajoutera un Display:block sur l'affichage de l'élément qui remplacera alors la propriété dans le fichier CSS.

Answer 2

c'est assez basique jquery.

// address the arrow button with an #id or .class 
$('#arrow_button').click(function(){ 
    $('#overlay').toggle(); 
}); 

Answer 3

Est-ce ce que vous voulez réaliser?

$('.buttons button').click(function(){ 
 
    var $this = $(this); 
 
    $('.tabs .active').hide('drop',function(){ 
 
     $(this).removeClass('active');  
 
     $('.tabs div:eq('+$this.index()+')').show('fade').addClass('active');   
 
    });  
 
    
 
});

.tabs{ 
 
    height:300px; 
 
} 
 
.tab{ 
 
    height:250px; 
 
    display:none; 
 
    border:solid blue thick; 
 
    background-color:#88a; 
 
} 
 
.tab.active{ 
 
    display:block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<div class="tabs"> 
 
    <div class="tab active">Content1</div> 
 
    <div class="tab">Content2</div> 
 
    <div class="tab">Content3</div> 
 
</div> 
 
<div class="buttons"> 
 
    <button>content 1</button> 
 
    <button>content 2</button> 
 
    <button>content 3</button> 
 
</div>