Boite Pop-up

by Arnaud

HTML

<div id="content">
<div class="bouton">
  <div class="toto">
toto
    <span class="">Login</span>
</div>
Bouton
</div>

<div id="infos">
<ul>
<li>Nom : Toto</li>
<li>Prénom : Gérard</li>
<li><img src="https://live.staticflickr.com/4900/44064914690_f9b2839c53_q.jpg" cclass="img" /></li>
</ul>

</div>
</div>

CSS

ul{
  list-style:none;
}

#infos{
  display:none;
  position:absolute;
  width:400px;
  background:#ccc;
  border:1px solid #888;
  left:calc(50% - 200px);
}

.bouton{
  background:red;
  color:white;
  display:inline-block;
  padding:10px;
}

JavaScript

$('.bouton .toto span').click(function(){
$('#infos').fadeIn();
});

$('document').ready(function(){

});