Bootstrap 3 mit Remote Modal

Ich habe gerade ein neues Projekt mit der neuen Twitter-Bootstrap-Version 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 zum Laufen bringen?

In Bezug auf die Remote-Option für Modalitäten aus den Dokumenten :

Wenn eine Remote-URL angegeben wird, 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 bereitstellen 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 geladen .modal-content

Sehen Sie sich diese Demo-Geige an

Boostrap 3.3 Update:

Diese Option ist seit Version 3.3.0 veraltet und wurde in Version 4 entfernt. Wir empfehlen, stattdessen clientseitiges Templating oder ein Datenbindungsframework zu verwenden oder jQuery.load selbst aufzurufen .

Für Bootstrap 3

Der Workflow, mit dem ich mich befassen musste, war das Laden von Inhalten mit einem URL-Kontext, 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 Modal zu zerstören würde für mich nicht funktionieren, da ich nicht von derselben Fernbedienung geladen habe, also 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 bietet Ihnen viel Flexibilität beim Laden von Modalitäten

Ich hoffe, das erspart jemandem 15 Minuten Basteln.

Wenn Sie nicht die vollständige Modalstruktur senden möchten, können Sie das alte Verhalten wie folgt 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();
});

Hier ist meine Lösung (einige davon oben), die die BS3-eigene Struktur verwendet, 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 optimieren 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 gerade da. Eine Sache, die Sie möglicherweise tun möchten, ist, den Modalkörper mit einer maximalen Höhe zu gestalten, damit lange Inhalte gescrollt werden.

In Ihrem CSS benötigen Sie Folgendes:

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

Nur zur Veranschaulichung werde ich den HTML-Code des Modals einfügen, der ein Abbruch jedes Bootsrap-Modal-Beispiels 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 -->

Ich tat dies:

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

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)

Hier ist die Methode, die ich benutze. Es sind keine versteckten DOM-Elemente auf der Seite erforderlich, und es sind 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
  }());

Erstellen Sie zur Verwendung einfach ein Tag mit der href des modalen Teils:

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

Eine andere großartige und einfache Möglichkeit besteht darin, ein blindes 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 anrufen remote_modal('/my/url.html')und der Inhalt wird innerhalb des Modals angezeigt

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>