pop up message comme fenêtre SO Drapeau

Question

Comment puis-je créer une fenêtre pop-up/message comme ce que vous voyez sur ce site lorsque vous cliquez sur le lien flag

Answer 1

Voici une solution personnalisée. Crée simplement un div, le fait disparaître et le positionne là où vous avez cliqué.

jQuery:

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

    $('#target').click(function (event) { 
     var x = event.pageX; 
     var y = event.pageY 
     $('<div id="popup">Click to close</div>').appendTo('body'); 
     $('#popup').css({opacity:0,display:'block',top:y,left:x}).animate({opacity: 1}, 300); 
    }); 

    $('#popup').live('click', function() { 
     $(this).animate({opacity: 0}, 300, function(){$(this).remove();}); 
    }); 

}); 

CSS:

#target { 
      cursor: pointer; 
      position:absolute; 
      top: 100px; 
      left: 100px; 
      background: orange; 
      border: 2px solid red; 
      color: white; 
      padding: 10px; 
     } 

     #popup { 
      width: 100px; 
      height: 100px; 
      background: #EEE; 
      border: 4px dashed purple; 
      position: absolute; 
      display:none; 
     } 

HTML:

<div id="target">click here</div> 

Answer 2

Vous pouvez utiliser un plugin jQuery puisque vous avez balisé ce que jQuery. Tooltip est un bon que vous pouvez utiliser dans un gestionnaire d'événements.

This tooltip plugin est similaire, mais semble fantastique.