web-dev-qa-db-fra.com

Bootstrap 3 avec Modal distant

Je viens de commencer un nouveau projet avec la nouvelle version de Twitter Bootstrap: bootstrap 3. Je ne parviens pas à faire fonctionner Modal en mode distant. Je veux juste que lorsque je clique sur un lien, il affiche le modal avec le contenu de l'URL distante. Cela fonctionne mais la mise en page modale est complètement détruite.

Voici un lien vers un jsfiddle: http://jsfiddle.net/NUCgp/5/

Le code :

<a data-toggle="modal" href="http://fiddle.jshell.net/Sherbrow/bHmRB/0/show/" data-target="#myModal">Click me !</a>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">&times;</button>
                 <h4 class="modal-title">Modal title</h4>

            </div>
            <div class="modal-body"><div class="te"></div></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

Quelqu'un peut-il faire fonctionner cet exemple simple?

twitter-bootstrapmodal-dialog
68
user2707039

En ce qui concerne l'option remote pour les modaux, à partir de la documentation :

Si une URL distante est fournie, le contenu sera chargé via la méthode de chargement de jQuery et injecté dans la racine de l'élément modal .

Cela signifie que votre fichier distant doit fournir la structure modale complète, pas seulement ce que vous voulez afficher sur le corps.

Mise à jour Bootstrap 3.1:

Dans la v3.1, le comportement ci-dessus a été modifié et le contenu distant est maintenant chargé dans .modal-content

Voir ceci Violon de démonstration

Boostrap 3.3 Update:

Cette option est obsolète depuis la version 3.3.0 et a été supprimée à partir de la version 4. jQuery.load vous-même.

110
koala_dev

Pour Bootstrap 3

Le flux de travail auquel je devais faire face chargeait le contenu avec un contexte d’URL qui pouvait changer. Donc, par défaut, configurez votre modal avec javascript ou le href pour le contexte par défaut que vous souhaitez afficher:

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

Détruire le modal ne fonctionnerait pas pour moi parce que je ne chargeais pas à partir de la même télécommande, je devais donc:

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

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

J'espère que cela économisera 15 minutes de bricolage.

29
zorkle

Si vous ne souhaitez pas envoyer la structure modale complète, vous pouvez répliquer l'ancien comportement en procédant comme suit:

// 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();
});
18
MM.

Voici ma solution (exploitant quelques solutions ci-dessus) qui utilise la propre structure de BS3 pour rétablir l'ancien comportement de téléchargement. Cela devrait être sans couture.

Je vais garder la variable de code lourde et descriptive pour que les choses restent compréhensibles. Je suppose également la présence de JQuery. Les types de leveurs lourds Javascript simplifieront facilement le code.

Pour référence, voici un lien qui appelle un modal BS3:

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

En Javascript, tu vas avoir 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;
  });
});

Nous sommes à peu près là. Une chose que vous voudrez peut-être faire est de styler le corps modal avec une hauteur maximale afin que le contenu long défile.

Dans votre CSS, vous aurez besoin des éléments suivants:

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

Pour rappel, j'inclurai le code HTML du modal, qui est une réplique de chaque exemple Bootsrap Modal 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 -->
14
TheAdventurist

J'ai fait ça:

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

Même si je n'aime pas modifier le code Bootstrap (ce qui rend la mise à niveau plus difficile), vous pouvez simplement ajouter ".find ('. Modal-body') à l'instruction load dans 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)
8
esvendsen

Voici la méthode que j'utilise. Il ne nécessite aucun élément DOM masqué sur la page et nécessite uniquement une balise d'ancrage avec le préfixe href du partiel modal et une classe de 'modalTrigger'. Lorsque le modal est fermé (masqué), il est supprimé 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 l'utiliser, il suffit de créer une balise avec le href du partiel modal:

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

un autre moyen simple et génial est d’avoir un modal blind dans votre mise en page et de 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 est affiché à l'intérieur du modal

4
huan son

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 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>
0
yardpenalty