07
OCT

Simple Modal - Une modal box Mootools multi usage très bien réalisée

Publié le 07/10/11 à 09h36 par DJo

Simple Modal est un plugin Mootools permettant de créer des modal box évoluées et pouvant servir de lightbox, dialog de contenu, boîte de confirmation ...

Simple Modal

Nous n'oublions pas les utilisateurs de Mootools ! Simple Modal est encore un bon exemple de la puissance du framework et de la créativité de ses développeurs.

Grâce à un design très élégant et des animations / transitions très propres, ce plugin Mootools de Modal box se démarque des autres.

Ce n'est pas une simple modal box, car il permet d'afficher tout type de contenu:

  • En mode contenu HTML (Ajax ou statique):

Simple Modal - Contenu Ajax ou HTML

Voici un exemple d'utilisation de la modal box en mode Ajax:

$("myElement").addEvent("click", function(){
  var SM = new SimpleModal({"width":600});
      SM.addButton("Action button", "btn primary", function(){
          this.hide();
      });
      SM.addButton("Cancel", "btn");
      SM.show({
        "model":"modal-ajax",
        "title":"Title",
        "param":{
          "url":"ajax-content.php",
          "onRequestComplete": function(){ /* Action on request complete */ }
        }
      });
});

 

  • On peut aussi utiliser le plugin en mode slideshow d'images:

Simple Modal - Mode lightbox Mootools

A savoir que la lightbox peut être déplacée ou non avec du drag & drop sur le header de la box.

Côté utilisation voici le code à mettre en place:

$("myElement").addEvent("click", function(){
  var SM = new SimpleModal();
      SM.show({
        "model":"modal-ajax",
        "title":"Image title",
        "param":{
          "url":"http://url-file.jpg",
          "onRequestComplete": function(){ }
        }
      });
});

 

  • Ou en mode vidéo:

Simple Modal - Mode player Vidéo

Il est aussi possible d'utilise Simple Modal comme alert box design ou confirm box. Une bonne alternative aux box natives Javascript par forcément très sexy...

Bref, un véritable plugin de modal box multi usage qui pourra satisfaire un bon nombre vos besoins.

 

Site Officiel

Baraguiné par nkos le 07/10/11 à 10h18
nkos sur La Ferme du Web
Excellent !! Merci :)

Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web