Modialog est un plugin JQuery qui permet de faire des popups « à la twitter » (la transparence en moins) très simplement.
N’importe quel évènement peut être le déclencheur (click ou mouseover par exemple). La popup peut contenir tous types de contenus images, boutons, formulaire…
On pourrait très bien imaginer y mettre un formulaire de contact par exemple.
Le style de base de la popup est soigné et très sobre à la fois, il peut donc s’adapter à beaucoup de designs, mais s’il ne vous convient pas, vous avez la liberté de le changer et/ou de l’améliorer simplement.
Voici un exemple basique d’utilisation de la librairie :
<p>
<a id="open0" href="#">Hello world </a>
<div id="dialog0" class="dialog">
<div class="content">Hello world! </div>
</div>
</p>
<script>
var $dlg0 = $('#dialog0');
$dlg0.modialog();
$('#open0').click(function() {
$dlg0.modialog('open');
return false;
});
</script>
Si vous souhaitez un exemple un peu plus complet : Demo
Voici des exemples en images du rendu de base. Tout en sachant que je n’ai pas du tout personnalisé le CSS. Imaginez-les avec le CSS de votre site Internet 😛
Il s’agit donc ici d’un plugin qui va très vite s’imposer dans mes applications web.