afficher un module avec jquery

[snatch1974]

Hello,
je n'ai pas le temps de te répondre en longueur, mais en lisant en travers, je me demande si tu utilises la solution Modal de BootStrap?
Je l'ai utilisée dans un site et cela ne me semblait pas aussi fourni en code.
http://getbootstrap.com/javascript/#modals

Oui j'utilise cette fonction là, mais j'ai plus de code à cause de la mise en page dans mon template et parce que j'utilise des formulaires traités en ajax dans la fenêtre "modal"

J'ai réussi à le faire fonctionner correctement par contre je trouve le code un peu bricolo donc, si vous avez une idée pour l'améliorer...

Voilà comment j'ai fait:


Mes boutons avec capture des formulaires assignés à une variable JS, qui devront apparaitre dans la fenêtre "Modal"

Code :

[== PHP ==]
         <div class="col-xs-4">
            {capture name="callme" assign="callme"}{FormBuilder form='callmeback' form_id="5"}{/capture}
            <script type="text/javascript">var callme = "{$callme|escape:javascript}";</script>
            <a class="btn btn-vert btn-big modalform" href="#modalform" data-toggle="modal" data-form="callme" >
               <span class="glyphicon glyphicon-retweet"></span><br/>
               <h3>Demande de rappel</h3>
            </a>
         </div>
         <div class="col-xs-4">
            {capture name="sendmail" assign="sendmail"}{FormBuilder form='contact_fr'}{/capture}
            <script type="text/javascript">var sendmail = "{$sendmail|escape:javascript}";</script>  
            <a class="btn btn-vert btn-big modalform" href="#modalform" data-toggle="modal" data-form="sendmail">
               <span class="glyphicon glyphicon-envelope"></span><br/>
               <h3>Contact par mail</h3>
            </a>
         </div>

J'ai ensuite le code de la fenêtre "Modale" générique et vide de contenu puisqu'elle sera remplie par le clic d'un bouton

Code :

[== PHP ==]
<div class="modal fade" id="modalform" role="dialog">
   <div class="modal-dialog">
      <div class="modal-content" id="modalform_content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Modal Header</h4>
         </div>
         <div class="modal-body" id="modalform_body">
            
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
         </div>
      </div>      
   </div>
</div>

Enfin le jquery qui écoute les boutons et lorsqu'on clic sur un, il récupère l'attribut data-form en le transformant en nom de variable à appeler (une de celle définie avant chaque bouton) et utilise le contenu de cette variable pour peupler la fenêtre "Modale".
On a ensuite une fonction prepareform() qui traite le formulaire en ajax et enfin 2 events sur l'ouverture et la fermeture de la fenêtre "Modal" pour:
A l'ouverture -> stocker le formulaire initial dans une variable form_content
A la fermeture -> reinitialiser le formulaire avec la version initiale stockée à l'ouverture et vider la variable form_content

Code :

[== JavaScript ==]
$(document).ready(function() {

   var form_content;

   $("a.modalform").each(function() {

      $(this).on("click", function() {
         var foo = $(this).data("form");
         var content = window[foo];
         $("#modalform_body").html(content);
      });

   });


   function prepareForm() {

      $("#modalform_body form.cms_form").on( "submit", function( event ) {
         event.preventDefault();
         var posturl = $(this).attr("action") + "?showtemplate=false";  
         var postdata = $(this).serialize();

         $.post(posturl,postdata,function(data) {
            $("#modalform_body").html(data);
            prepareForm();
         });
      });
   }

   $("#modalform").on('shown.bs.modal', function() {
      form_content = $("#modalform_content").html();
      prepareForm();
   });

   $("#modalform").on('hidden.bs.modal', function() {
      $("#modalform_content").html(form_content);
      fom_content = '';
      prepareForm();
    });

});

J'ai essayé de passé les variables de départ {$callmeback} et {$sendmail} et scope=global pour voir si je pouvais les réutiliser directement dans le code JS et ainsi éviter le

<script type="text/javascript">var callme = "{$callme|escape:javascript}";</script>

mais ça ne fonctionne pas !
Donc, si vous avez une idée pour améliorer le truc...

Merci