jQuery: box modale per i bottoni social

Possiamo creare con jQuery un box modale che contenga uno o più bottoni per la condivisione sui social network. In questo esempio vedremo un box modale che contiene un bottone di Twitter. Il segreto dell'implementazione non sta tanto nella finestra modale (abusata, abusatissima), quanto piuttosto nel modo con cui reperiamo i dati sensibili della risorsa da condividere tramite i metodi di attraversamento del DOM di jQuery. Vediamo insieme i dettagli.

Abbiamo questa struttura HTML ripetuta:

<div class="post">
  <div class="entry">
	<h2><a href="URL">...</a></h2>
	<!-- contenuti del post -->
  </div>
  <div class="meta">
    <!-- lancia il box modale -->
  	<p><a href="#" class="twitter">Tweet</a></p>
  </div>
</div>

Per popolare il bottone di Twitter a noi interessano solo il titolo del post e l'URL del post contenuto nel link dell'intestazione. Gli stili CSS della finestra modale sono i seguenti:

#overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	background: #333;
}

#tweet {
	width: 300px;
	height: 200px;
	background: url(box.png) no-repeat;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -100px 0 0 -150px;
	text-align: center;
	z-index: 2;
}

#tweet a {
	width: 42px;
	height: 42px;
	display: block;
	position: absolute; 
	top: -20px;
	right: 5px;
	background: url(close-button.png) no-repeat;
	text-indent: -1000em;
}

#tweet iframe {
	margin: 80px 0;
	display: block;
	padding-left: 120px;
}

Cominciamo con l'inserire e nascondere l'elemento sovrapposto e il box modale. L'elemento sovrapposto avrà un'opacità dello 0.7, in modo da creare un effetto di patinatura sulla pagina:

$('<div id="overlay"/>').css('opacity', '0.7').appendTo('body').hide();
	
$('<div id="tweet"/>').html('<a href="#">Chiudi</a>').insertAfter('#overlay').hide();

Quindi creiamo la struttura di base dell'iframe di Twitter:

var iframe = '<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.html';

Eseguiamo un ciclo sui link che aprono la finestra modale popolando l'URL del bottone di Twitter con i parametri necessari. Cliccando su ciascuno di questi link vengono mostrati l'elemento sovrapposto e il box modale:

$('a.twitter').each(function() {
    
    	var $a = $(this);
    	var url = $a.parent().parent().prev().find('h2 > a').attr('href');
    	var text = $a.parent().parent().prev().find('h2 > a').text();
    	
    	$a.click(function(event) {
    	
    		iframe += '?url=' + url + '&text=' + text + '&count=vertical&via=gabromanato"></iframe>';
    		
    		$(iframe).appendTo('#tweet');
    		
    		$('#overlay').show().next().show();
    		
    		event.preventDefault();
    	
});

Infine, non ci resta che associare un'azione di chiusura al link contenuto nel box modale:

$('a', '#tweet').each(function() {
    
    	var $a = $(this);
    	
    	$a.click(function(event) {
    	
    		$a.parent().hide().prev().hide();
    	
    		event.preventDefault();
    	
    	});
    
});

Riassumendo, possiamo dire che tutto il lavoro maggiore si concentra in queste espressioni:

var $a = $(this);
var url = $a.parent().parent().prev().find('h2 > a').attr('href');
var text = $a.parent().parent().prev().find('h2 > a').text();

Ossia: risali al genitore del tuo genitore, seleziona l'elemento precedente (entry) e in questo elemento seleziona il link contenuto nell'elemento h2. Senza questo attraversamento del DOM non sarebbe possibile avere l'URL e il titolo del post corrente.

Potete visionare l'esempio finale in questa pagina.