Fenêtres de dialogue JavaScript avec Modialog

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.

Adapter sa taille de police à la résolution avec fitText

Tous les développeurs qui ont déjà travaillé sur des sites Internet qui doivent être visibles depuis plusieurs types de supports (comme une tablette ou un smartphone) ont déjà eu le problème des lignes de textes qui se superposent quand la résolution devient trop petite. fitText est justement pensé pour ne plus avoir ce type de problème.
Il sait adapter la taille de la police en fonction de la résolution de l’écran. Un peu comme le fait JQuery mobile.

Pour l’utiliser, après avoir inclus le plugin dans votre code il vous suffit de faire un simple appel javascript.

   $("#monElement").fitText(0.8);

monElement doit avoir une largeur extensible : exprimé en % afin que le plugin fonctionne. Ici 0,8 est le taux d’agressivité de la police.

fitText va très vite devenir un plugin indispensable à tout site Internet.

Et voila, adieu les problèmes de superposition de texte !