Bootstrap 3 avec Remote Modal

Pour Bootstrap 3

le flux de travail que j'ai eu à gérer était de charger du contenu avec un contexte url qui pourrait changer. Ainsi, par défaut, configurez votre modal avec javascript ou href pour le contexte par défaut que vous voulez afficher:

$('#myModal').modal({
        show: false,
        remote: 'some/context'
});

détruire le modal ne marcherait pas pour moi parce que je ne chargeais pas à partir de la même télécommande, donc j'ai dû:

$(".some-action-class").on('click', function () {
        $('#myModal').removeData('bs.modal');
        $('#myModal').modal({remote: 'some/new/context?p=' + $(this).attr('buttonAttr') });
        $('#myModal').modal('show');
});

cela bien sûr a été facilement refactorisé dans une bibliothèque js et vous donne beaucoup de flexibilité avec le chargement modals

j'espère que ça sauvera quelqu'un 15 minutes de bricolage.

si vous ne voulez pas envoyer la structure modale complète, vous pouvez répliquer l'ancien comportement en faisant quelque chose comme ceci:

// this is just an example, remember to adapt the selectors to your code!
$('.modal-link').click(function(e) {
    var modal = $('#modal'), modalBody = $('#modal .modal-body');

    modal
        .on('show.bs.modal', function () {
            modalBody.load(e.currentTarget.href)
        })
        .modal();
    e.preventDefault();
});

voici ma solution (en tirant parti de quelques-unes ci-dessus) qui utilise la propre structure de BS3 pour rétablir le vieux comportement de chargement à distance. Il devrait être transparente.

je vais garder la variable de code lourde et descriptive pour garder les choses compréhensibles. Je suppose aussi la présence de JQuery. Les types de lève-personnes lourds Javascript simplifieront considérablement le code.

pour référence voici un lien qui invoque un modal BS3:

<li><a data-toggle="modal" href="terms.html" data-target="#terms">Terms of Use</a></li>

dans votre Javascript, vous aurez besoin de ce qui suit.

// Make sure the DOM elements are loaded and accounted for
$(document).ready(function() {

  // Match to Bootstraps data-toggle for the modal
  // and attach an onclick event handler
  $('a[data-toggle="modal"]').on('click', function(e) {

    // From the clicked element, get the data-target arrtibute
    // which BS3 uses to determine the target modal
    var target_modal = $(e.currentTarget).data('target');
    // also get the remote content's URL
    var remote_content = e.currentTarget.href;

    // Find the target modal in the DOM
    var modal = $(target_modal);
    // Find the modal's <div class="modal-body"> so we can populate it
    var modalBody = $(target_modal + ' .modal-body');

    // Capture BS3's show.bs.modal which is fires
    // immediately when, you guessed it, the show instance method
    // for the modal is called
    modal.on('show.bs.modal', function () {
            // use your remote content URL to load the modal body
            modalBody.load(remote_content);
        }).modal();
        // and show the modal

    // Now return a false (negating the link action) to prevent Bootstrap's JS 3.1.1
    // from throwing a 'preventDefault' error due to us overriding the anchor usage.
    return false;
  });
});

on y est presque. Une chose que vous pouvez vouloir faire est de style le corps modal avec un max-Hauteur, de sorte que le long contenu va défiler.

dans votre CSS, vous aurez besoin de ce qui suit:

.modal-body{
    max-height: 300px;
    overflow-y: scroll;
}

juste à titre indicatif, je vais inclure le HTML du modal, qui est une copie de chaque exemple Modal Bootsrap que vous avez vu:

<div id="terms" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3 id="termsLabel" class="modal-title">TERMS AND CONDITIONS</h3>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

j'ai fait ceci:

$('#myModal').on 'shown.bs.modal', (e) ->  
  $(e.target).find('.modal-body').load('http://yourserver.com/content')

autant je n'aime pas modifier le code Bootstrap (rend la mise à jour plus difficile), vous pouvez simplement ajouter".trouver.'(modal-body') à la déclaration de charge en modal.js comme suit:

// original code
// if (this.options.remote) this.$element.load(this.options.remote)

// modified code
if (this.options.remote) this.$element.find('.modal-body').load(this.options.remote)

, Voici la méthode que j'utilise. Il ne nécessite aucun élément DOM caché sur la page, et ne nécessite qu'une étiquette d'ancrage avec le href du modal partiel, et une classe de "modalTrigger". Lorsque le modal est fermé (caché), il est retiré du DOM.

  (function(){
        // Create jQuery body object
        var $body = $('body'),

        // Use a tags with 'class="modalTrigger"' as the triggers
        $modalTriggers = $('a.modalTrigger'),

        // Trigger event handler
        openModal = function(evt) {
              var $trigger = $(this),                  // Trigger jQuery object

              modalPath = $trigger.attr('href'),       // Modal path is href of trigger

              $newModal,                               // Declare modal variable

              removeModal = function(evt) {            // Remove modal handler
                    $newModal.off('hidden.bs.modal');  // Turn off 'hide' event
                    $newModal.remove();                // Remove modal from DOM
              },

              showModal = function(data) {             // Ajax complete event handler
                    $body.append(data);                // Add to DOM
                    $newModal = $('.modal').last();    // Modal jQuery object
                    $newModal.modal('show');           // Showtime!
                    $newModal.on('hidden.bs.modal',removeModal); // Remove modal from DOM on hide
              };

              $.get(modalPath,showModal);             // Ajax request

              evt.preventDefault();                   // Prevent default a tag behavior
        };

        $modalTriggers.on('click',openModal);         // Add event handlers
  }());

pour utiliser, il suffit de créer une étiquette a avec le href du partiel modal:

<a href="path/to/modal-partial.html" class="modalTrigger">Open Modal</a>

un autre moyen grand et facile est d'avoir un aveugle modal dans votre disposition et l'appeler si nécessaire.

JS

  var remote_modal = function(url) {
    // reset modal body with a spinner or empty content
    spinner = "<div class='text-center'><i class='fa fa-spinner fa-spin fa-5x fa-fw'></i></div>"

    $("#remote-modal .modal-body").html(spinner)
    $("#remote-modal .modal-body").load(url);
    $("#remote-modal").modal("show");
  }

et votre HTML

 <div class='modal fade' id='remote-modal'>
    <div class='modal-dialog modal-lg'>
      <div class='modal-content'>
        <div class='modal-body'></div>
        <div class='modal-footer'>
          <button class='btn btn-default'>Close</button>
        </div>
      </div>
    </div>
  </div>
</body>

maintenant vous pouvez simplement appeler remote_modal('/my/url.html') et le contenu s'affiche à l'intérieur du modal

je le fais de cette façon:

<!-- global template loaded in all pages // -->
     <div id="NewsModal" class="modal fade" tabindex="-1" role="dialog" data-ajaxload="true" aria-labelledby="newsLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h3 class="newsLabel"></h3>
                    </div>
                    <div class="modal-body">
                            <div class="loading">
                                <span class="caption">Loading...</span>
                               <img src="/images/loading.gif" alt="loading">
                        </div>
                    </div>
                    <div class="modal-footer caption">
                        <button class="btn btn-right default modal-close" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

Voici mon a href:

<a href="#NewsModal" onclick="remote=\'modal_newsfeed.php?USER='.trim($USER).'&FUNCTION='.trim(urlencode($FUNCTIONCODE)).'&PATH_INSTANCE='.$PATH_INSTANCE.'&ALL=ALL\'
                                        remote_target=\'#NewsModal .modal-body\'" role="button" data-toggle="modal">See All Notifications <i class="m-icon-swapright m-icon-dark"></i></a>