it-swarm.com.de

Bootstrap 3 mit Remote Modal

Ich habe gerade ein neues Projekt mit der neuen Twitter-Version Bootstrap gestartet: bootstrap 3. Ich kann das Modal im Remote-Modus nicht zum Laufen bringen. Ich möchte nur, dass beim Klicken auf einen Link das Modal mit dem Inhalt der Remote-URL angezeigt wird. Es funktioniert, aber das modale Layout ist vollständig zerstört.

Hier ist ein Link zu einer jsfiddle: http://jsfiddle.net/NUCgp/5/

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

Kann jemand dieses einfache Beispiel arbeiten lassen?

68
user2707039

In Bezug auf die Remote-Option für Modale von the docs :

Wenn eine ferne URL angegeben ist, wird der Inhalt über die Lademethode von jQuery geladen und in das Stammverzeichnis des modalen Elements eingefügt.

Das bedeutet, dass Ihre Remote-Datei die vollständige modale Struktur aufweisen sollte, nicht nur das, was Sie auf dem Körper anzeigen möchten.

Bootstrap 3.1 Update:

In v3.1 wurde das obige Verhalten geändert und nun wird der Remote-Inhalt in .modal-content Geladen.

Siehe hierzu Demo fiddle

Boostrap 3.3 Update:

Diese Option ist seit v3.3.0 veraltet und wurde in v4 entfernt. Wir empfehlen, stattdessen clientseitiges Templating oder ein Datenbindungsframework zu verwenden oder jQuery.load aufzurufen dich selber.

110
koala_dev

Für Bootstrap 3

Der Workflow, mit dem ich zu tun hatte, bestand darin, Inhalte mit einem URL-Kontext zu laden, der sich ändern konnte. Richten Sie Ihr Modal also standardmäßig mit Javascript oder der href für den Standardkontext ein, den Sie anzeigen möchten:

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

Das Zerstören des Modals würde für mich nicht funktionieren, da ich nicht von derselben Fernbedienung geladen habe. Daher musste ich:

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

Dies wurde natürlich leicht in eine js-Bibliothek umgestaltet und gibt Ihnen viel Flexibilität beim Laden von Modalitäten

Ich hoffe das erspart jemandem 15 Minuten Basteln.

29
zorkle

Wenn Sie nicht die vollständige modale Struktur senden möchten, können Sie das alte Verhalten folgendermaßen replizieren:

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

Hier ist meine Lösung (unter Nutzung einiger oben genannter), die die BS3-eigene Struktur nutzt, um das alte Fernladeverhalten wiederherzustellen. Es sollte nahtlos sein.

Ich werde die Codevariable schwer und beschreibend halten, um die Dinge verständlich zu halten. Ich gehe auch von der Anwesenheit von JQuery aus. Javascript Heavy-Lifter-Typen rationalisieren den Code auf einfache Weise.

Als Referenz hier ein Link, der ein BS3-Modal aufruft:

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

In Ihrem Javascript benötigen Sie Folgendes.

// 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;
  });
});

Wir sind gleich da. Möglicherweise möchten Sie den modalen Körper mit einer maximalen Höhe formatieren, damit der lange Inhalt gescrollt wird.

In Ihrem CSS benötigen Sie Folgendes:

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

Nur zur Veranschaulichung füge ich den HTML-Code des Modals hinzu, der ein Abschlag für jedes Bootsrap-Modal-Beispiel ist, das Sie jemals gesehen haben:

<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

Ich tat dies:

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

So sehr ich es nicht mag, Bootstrap Code zu ändern (was das Upgrade erschwert), können Sie der load-Anweisung in modal.js einfach ".find ('. Modal-body') wie folgt hinzufügen:

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

Hier ist die Methode, die ich benutze. Es sind keine versteckten DOM-Elemente auf der Seite erforderlich, und es ist nur ein Ankertag mit der href des modalen Teils und eine Klasse von 'modalTrigger' erforderlich. Wenn das Modal geschlossen (ausgeblendet) ist, wird es aus dem DOM entfernt.

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

Zur Verwendung erstellen Sie einfach ein Tag mit der href des modalen Teils:

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

eine andere großartige und einfache Möglichkeit besteht darin, ein blind modal in Ihrem Layout zu haben und es bei Bedarf aufzurufen.

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");
  }

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

jetzt können Sie einfach remote_modal('/my/url.html') aufrufen und der Inhalt wird innerhalb des Modals angezeigt

4
huan son

Ich mache es so:

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

Hier ist mein 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>
0
yardpenalty