Bootstrap 3 - Hoe inhoud laden in modal body via AJAX?

Zoals je kunt zien hier, heb ik een knop die een modal opstart. Door een href url voor de knop in te stellen wordt deze url automatisch in de modal geladen door Bootstrap 3. Het feit is dat deze pagina wordt geladen in de modal root (zoals gezegd in de bootstrap 3 documentatie voor modals gebruik). Ik wil het in plaats daarvan in de modal-body laden.

Is er een manier om dit te doen via attributen (niet javascript)? Of wat is de meest automatische manier om het te doen?

P.S. Ik herinner me dat in Bootstrap 2 de inhoud in de body werd geladen, niet in de root.

Zim
Bewerkte vraag 26ste3 april 2018 в 11:28
Programmering
modal-dialog ajax twitter-bootstrap-3 twitter-bootstrap
29ste1 oktober 2013 в 4:08
20 views

Dit is eigenlijk super simpel met slechts een klein beetje toegevoegde javascript. De link's href wordt gebruikt als de ajax content bron. Merk op dat voor Bootstrap 3.* we data-remote="false" instellen om de deprecated Bootstrap load functie uit te schakelen.

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 (gebaseerd op het officiële voorbeeld):


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

Probeer het zelf: https://jsfiddle.net/ednon5d1/

marcovtwout
Bewerkt antwoord 6de3 augustus 2015 в 2:13
Commentaren (7)
Oplossing

Check dit SO antwoord uit.

Het lijkt erop dat de enige manier is om de hele modale structuur mee te leveren met je ajax antwoord.

Zoals je kunt zien in de bootstrap broncode, is de laad functie gebonden aan het root element.

In het geval dat je de ajax respons niet kunt aanpassen, zou een simpele workaround een expliciete aanroep van de $(..).modal(..) plugin op je body element kunnen zijn, ook al zal het waarschijnlijk de show/hide functies van het root element breken.

Community
Bewerkt antwoord 23ste1 mei 2017 в 11:54
Commentaren (0)

Ik denk dat je op zoek bent naar deze aangepaste functie. Het neemt een data-toggle attribuut en creëert dynamisch de nodige div om de inhoud op afstand te plaatsen. Plaats gewoon de data-toggle="ajaxModal" op elke link die je via AJAX wilt laden.

Het JS gedeelte:

$('[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);
              }
            );

Tenslotte, in de remote content, moet je de hele structuur aan het werk zetten.

<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
Bewerkt antwoord 20ste2 augustus 2014 в 9:16
Commentaren (1)