Classe Mootools pour popup

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • Classe Mootools pour popup

    voilà encore une petite classe de ma composition qui permet d'afficher sous forme de popup un contenu de la page.
    Extrait HTML:
    Code PHP:
    <div id="cssModuleControlsEdit" class="cssButtonPopupOpen">Ouvrir le popup</div>

    <
    div id="cssModuleFields" class="cssfieldsContainer">
       <
    div id="cssModuleControlsClose" class="cssButtonPopupClose"</div>
        
    Voilà la popup qui est ouverte
    </div
    Extrait CSS :
    Code:
    .cssButtonPopupOpen {
        line-height: 30px;
        border: 1px solid #fff;
        margin: 10px 5px 0 5px;
        padding: 0;
        color: #fff;
        text-align: center;
        line-height: 30px;
        font-size: 14px;
        cursor: pointer;
        -moz-box-shadow: 0 0 5px #888;
        -webkit-box-shadow: 0 0 5px#888;
        box-shadow: 0 0 5px #888;
        -moz-border-radius: 0.5em;
        border-radius: 0.5em;
        background-color: #666;
    }
    
    .cssfieldsContainer {
        position: fixed;
        z-index: 100;
        display: none;
        left: 50%;
        margin-left: -100px;
        top: 50%;
        margin-top: -100px;
        height: 200px;
        width: 210px;
        padding: 10px;
        background: #f4f4f4;
        -moz-box-shadow: 0 0 15px #888;
        -webkit-box-shadow: 0 0 15px#888;
        box-shadow: 0 0 15px #888;
        -moz-border-radius: 0.5em;
        border-radius: 0.5em;
    }
    
    .cssButtonPopupClose {
        display: block;
        float: right;
        width: 30px;
        height: 30px;
        background-position: 2px 2px;
        background-repeat: no-repeat;
        cursor: pointer;
        border: 1px solid #fff;
        background-color: #f4f4f4;
        -moz-box-shadow: 0 0 5px #888;
        -webkit-box-shadow: 0 0 5px#888;
        box-shadow: 0 0 5px #888;
        background-image: url(../images/delete.png);
    }
    Classe Mootools :
    Code PHP:
    var popupCK = new Class({
            
    options: {
                
    popupuWindowId'cssModuleFields',
                
    popupCloseButtonId'cssModuleControlsClose'
            
    },

            
    initialize: function(eloptions) {
                var 
    el document.id(el);
                if (!
    el) return;
                
    this.setOptions(options);
                var 
    popupuWindowId this.options.popupuWindowId;
                var 
    popupCloseButtonId this.options.popupCloseButtonId;


                    
    el.addEvent('click',function(){                       document.id(popupuWindowId).setStyle('display','block');
                });

                
    document.id(popupCloseButtonId).addEvent('click',function(){
                    
    document.id(popupuWindowId).setStyle('display','none');
                });


            }
        });
        
    popupCK.implement(new Options);

    new 
    popupCK('cssModuleControlsEdit',{
        
    popupuWindowId'cssModuleFields',
        
    popupCloseButtonId'cssModuleControlsClose'
    }); 
    Et le résultat en jsfiddle :
    Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.


    Peut-etre qu'un jour comme moi vous aurez besoin de faire un truc du genre et sans vouloir passer par des classes qui font des centaines de lignes pour rien (dans cette situation)


    On va me dire quel avantage à mettre en place ce pov' truc plutot qu'une belle lightbox ? ...
    tout simplement c'est qu'ici on affiche une partie de la page courante, utile pour les cas où on a un formulaire puisqu'on s'affranchit du souci de la transaction des données entre la page et la lightbox (vu qu'on ne quitte pas la page). C'est un exemple d'utilisation
    Dernière édition par ced1870 à 21/07/2011, 10h12
    Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
    http://www.template-creator.com Outil de création de templates
    Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

  • #2
    Re : Classe Mootools pour popup

    Bof, même pas draggable ton truc...




    Merci Môssier pour le partage.
    Christophe (cavo789)
    Mon blog, on y parle Docker, PHP, WSL, Markdown et plein d'autres choses : https://www.avonture.be
    Logiciel gratuit de scan antivirus : https://github.com/cavo789/aesecure_quickscan (plus de 45.000 virus détectés, 700.000 fichiers sur liste blanche)​

    Commentaire


    • #3
      Re : Classe Mootools pour popup

      Envoyé par cavo789 Voir le message
      Bof, même pas draggable ton truc...




      Merci Môssier pour le partage.
      hé ben non c'était pas le but! héhé
      rien ne t'empeches de le rendre draggable cela dit ... défi lancé !
      Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
      http://www.template-creator.com Outil de création de templates
      Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

      Commentaire


      • #4
        Re : Classe Mootools pour popup

        Je ne suis pas très pro de Mootools Sacré défi donc mais, non, je n'ai pas vraiment le temps.

        Cela pourrait toutefois être bien sympa : dans mon composant, je vois bien une utilisation. Dans l'écran liste des évènements, j'ai un bouton qui permet d'afficher une DIV qui reprend un grand nombre de listes déroulantes pour filtrer la liste (les évènements de tel agenda, de telle section, à tel endroit, ....). Aujourd'hui, c'est une bête DIV. Cela pourrait être une floating window.
        Christophe (cavo789)
        Mon blog, on y parle Docker, PHP, WSL, Markdown et plein d'autres choses : https://www.avonture.be
        Logiciel gratuit de scan antivirus : https://github.com/cavo789/aesecure_quickscan (plus de 45.000 virus détectés, 700.000 fichiers sur liste blanche)​

        Commentaire


        • #5
          Re : Classe Mootools pour popup

          exactement, j'ai le même type d'utilisation puisque c'est une classe que j'ai développé pour template creator.
          Je vais passer quasi tous les champs d'options de personnalisation css dans des popups pour libérer la place, et dans la fenetre popup je mets le slider que j'ai déjà posté aussi
          Comme ça j'ai une place infinie au final
          Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
          http://www.template-creator.com Outil de création de templates
          Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

          Commentaire


          • #6
            Re : Classe Mootools pour popup

            allez pour le fun j'ai fais un petit drag sur la fenêtre
            Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
            Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
            http://www.template-creator.com Outil de création de templates
            Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

            Commentaire


            • #7
              Re : Classe Mootools pour popup

              Cool ! Dès que je m'attaquerais à l'écran des filtres; je penserais à inclure ton script.
              Christophe (cavo789)
              Mon blog, on y parle Docker, PHP, WSL, Markdown et plein d'autres choses : https://www.avonture.be
              Logiciel gratuit de scan antivirus : https://github.com/cavo789/aesecure_quickscan (plus de 45.000 virus détectés, 700.000 fichiers sur liste blanche)​

              Commentaire

              Annonce

              Réduire
              Aucune annonce pour le moment.

              Partenaire de l'association

              Réduire

              Hébergeur Web PlanetHoster
              Travaille ...
              X