Ouvrir une popup avec jQuery

By 1 juillet 2012Javascript/jQuery, Tutoriels

Comme on avait eu pas mal de misères avec Fancybox, il me semble opportun de vous montrer ici comment on peut ouvrir une popup avec jQuery vite fait 😉
Le contenu de cette popup sera alimenté par un fichier php qui retourne des données. Il s’agit ici d’un exemple simple qui vous montre le principe pour récupérer des données d’une base de données par exemple.

Il nous faut 2 fichiers. Bien sûr vous aurez pris soin d’appeler la librairie jQuery auparavant.

fichier test.html

$(document).ready(function () { // quand la page est chargée			
	$('#popup').html('chargement en cours...').show('slow'); 
        $('a.test').click(function(){ 
            $.ajax({ 
                type : 'POST', 
                url : 'test.php', 
                data: 'var=Artcompix à votre service', 
                success : function(data){ 
                    $('#loading').hide(); 
                    $('#popup').html(data); 
                }, error : function(XMLHttpRequest, textStatus, errorThrown) { 
                    $('#loading').hide(); 
                    $('#popup').html('Une erreur est survenue !'); 
                }, 
             } 
         }); 
        }); 
});

Pensez à avoir une image « loader.gif » dans votre dossier images.

Insérez ensuite un lien pour appeler la fonction jQuery.

Appel AJAX

fichier test.php

Il vous restera encore quelques détails à régler : mettre un style CSS à votre div « popup » par exemple.

Bon courage, et si ça ne fonctionne pas, les commentaires sont là.

Laisser un commentaire