Bootstrap 3 - Comment charger le contenu dans le corps modal via AJAX ?

Comme vous pouvez le voir [ici][1], j'ai un bouton qui lance une modale. En définissant une url href pour le bouton, cette url est automatiquement chargée dans la modale par Bootstrap 3. Le fait est que cette page est chargée dans la racine de la modale (comme indiqué dans la [documentation de Bootstrap 3 pour l'utilisation des modales][2]). Je veux la charger dans le corps de la modale à la place.

Existe-t-il un moyen de le faire via des attributs (pas de javascript) ? Ou quel est le moyen le plus automatique de le faire ?

P.S. Je me souviens que dans Bootstrap 2, le contenu était chargé dans le corps, et non dans la racine.

[1] : http://bootply.com/thiezar/90757 [2] : http://getbootstrap.com/javascript/#modals-usage

Zim
Question modifiée 26 avril 2018 в 11:28
Programmation
modal-dialog ajax twitter-bootstrap-3 twitter-bootstrap
29 octobre 2013 в 4:08
16 vues

C'est en fait très simple et il suffit d'ajouter un peu de javascript. Le href du lien est utilisé comme source de contenu ajax. Notez que pour Bootstrap 3.*, nous définissons data-remote="false" pour désactiver la [fonction Bootstrap load dépréciée][1].

JavaScript :

// Fill modal with content from link href
$("#myModal").on("show.bs.modal", function(e) {
    var link = $(e.relatedTarget);
    $(this).find(".modal-body").load(link.attr("href"));
});

Html (basé sur [l'exemple officiel][2]) :


<a href="remoteContent.html" data-remote="false" data-toggle="modal" data-target="#myModal" class="btn btn-default">
    Launch Modal
</a>


<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">
        <span aria-hidden="true">×</span>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        Close
        Save changes
      </div>
    </div>
  </div>
</div>

Essayez vous-même : https://jsfiddle.net/ednon5d1/

[1] : http://getbootstrap.com/javascript/#modals-options [2] : http://getbootstrap.com/javascript/#live-demo

marcovtwout
Réponse modifiée 6 août 2015 в 2:13
Commentaires (7)
Solution

Vérifiez [cette réponse SO] (https://stackoverflow.com/questions/18378720/bootstrap-3-with-remote-modal).

Il semble que la seule solution consiste à fournir la structure modale complète avec votre réponse ajax.

Comme vous pouvez le vérifier dans le [code source] du bootstrap (https://github.com/twbs/bootstrap/blob/master/js/modal.js#L27), la fonction de chargement est liée à l'élément racine.

Si vous ne pouvez pas modifier la réponse ajax, une solution de contournement simple pourrait être un appel explicite du plugin $(..).modal(..) sur votre élément body, même si cela va probablement casser les fonctions show/hide de l'élément root.

Community
Réponse modifiée 23 mai 2017 в 11:54
Commentaires (0)

Je suppose que vous recherchez cette fonction personnalisée. Elle prend un attribut data-toggle et crée dynamiquement le div nécessaire pour placer le contenu distant. Il suffit de placer le data-toggle="ajaxModal&quot ; sur n'importe quel lien que vous voulez charger via AJAX.

La partie JS :

$('[data-toggle="ajaxModal"]').on('click',
              function(e) {
                $('#ajaxModal').remove();
                e.preventDefault();
                var $this = $(this)
                  , $remote = $this.data('remote') || $this.attr('href')
                  , $modal = $('<div class="modal" id="ajaxModal"><div class="modal-body"></div></div>');
                $('body').append($modal);
                $modal.modal({backdrop: 'static', keyboard: false});
                $modal.load($remote);
              }
            );

Enfin, dans le contenu distant, vous devez faire fonctionner toute la structure.

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            ×
            <h4 class="modal-title"></h4>
        </div>
        <div class="modal-body">
        </div>
        <div class="modal-footer">
            <a href="#" class="btn btn-white" data-dismiss="modal">Close</a>
            <a href="#" class="btn btn-primary">Button</a>
            <a href="#" class="btn btn-primary">Another button...</a>
        </div>
    </div>
</div>
Pratik Gadoya
Réponse modifiée 20 août 2014 в 9:16
Commentaires (1)