Bootstrap 3 mit Remote Modal

72

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?

twitter-bootstrap  modal-dialog 
— user2707039
quelle

Antworten:

112

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 .

— koala_dev
quelle
7
Sie müssen den Inhalt des Modals nicht auf Ihrer Originalseite platzieren, sondern nur die Quelle selbst. Siehe hier: jsfiddle.net/NUCgp/59
— rybo111
12
Warum zum Teufel muss ich das gleiche HTML 10 Mal für 10 Dialoge NUR replizieren, weil sie das geladene HTML in den modalen Inhalt und nicht in den Body einfügen? Sind sie dumm?!
— Pascal
1
Wie können wir die Modalgröße abhängig vom Remote-Inhalt ändern?
— Alex Jose
16
UPDATE: "Diese Option ist seit Version 3.3.0 veraltet und wird in Version 4 entfernt. Wir empfehlen, stattdessen clientseitiges Template oder ein Datenbindungsframework zu verwenden oder jQuery.load selbst aufzurufen."
— Thiago
6
Ich verstehe nicht, warum es veraltet ist ... Dies ist äußerst nützlich und trotz Abschreibung möchte ich es verwenden, verbessern, zum Funktionieren bringen (und das tue ich tatsächlich)! Es wäre großartig, einige tiefere Erklärungen dazu zu haben, um zu entscheiden, ob das Erstellen eines Plugins eine gute Idee wäre oder nicht ...
— Augustin Riedinger
29

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.

— zorkle
quelle
Nicht 100% sicher warum - aber ich musste mein DOM nach der Datenbereinigung bereinigen. Diese Zeile wurde hinzugefügt: $ ('# mymodal .modal-content'). Html ("");
— Froyke
4
$('#myModal').on('hide.bs.modal', function () { $('#myModal').removeData('bs.modal'); $('#myModal .modal-content').html(''); }); Funktioniert bei mir.
— Scott Flack
18

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();
});
— MM.
quelle
Warum können Sie nicht auf "Escape" klicken oder auf den Hintergrund klicken, um den Dialog zu schließen? Die Tastaturoption ist standardmäßig auf true gesetzt.
— Warrio
14

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 -->
— TheAdventurist
quelle
3
Dies kann verhindern, dass nicht entfernte Modals geladen werden. Ich habe dies im Click-Handler hinzugefügt, um es zu beheben. var href = e.currentTarget.getAttribute('href'); if (!href || href.indexOf('#') === 0) { return; }
— Chad von Nau
Danke, das hat mir sehr geholfen.
— jj2
1
Ich habe festgestellt, dass die Ereignisse show.bs.modal gestapelt wurden, also habe ich sie modal.off('show.bs.modal');zuvor hinzugefügt modal.on.
— Corie Slate
Wissen Sie, wie Sie diesen <a> -Tag-Link mit aa jQuery ausrichten können, damit die angegebene URL verwendet wird?
— Koffeehaus
Ich habe mehrere URLs auf meiner Seite, die ein Modal verwenden. Ihr Code hat eines meiner Probleme gelöst, aber wenn ich auf den ersten Link klicke, führt mich jeder andere Link, den ich öffne, zur ersten modalen URL, auf die ich geklickt habe. Können Sie mir helfen, das zu klären?
— Biko
9

Ich tat dies:

$('#myModal').on 'shown.bs.modal', (e) ->  
  $(e.target).find('.modal-body').load('http://yourserver.com/content')
— MBHNYC
quelle
Ich denke, dies ist die beste Lösung unter allen hier.
— Rajan Rawal
Hängt davon ab. Wenn Ihre Anwendung stark ausgelastet ist, schreiben Sie immer mehr JS. Aber für einige Szenarien ist dies perfekt
— udit mittal
8

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)
— esvendsen
quelle
5

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>
— Brandon Fitzpatrick
quelle
Das ist ausgezeichnet Brandon Fitzpatrick. Ich rufe die ASP.Net MVC-Teilansicht auf, sie wird geladen und kann dieses Popup anzeigen. Ich habe ein Problem, mein Abfragecode ist nicht an meine Schaltfläche, das Textfeld, gebunden. Können Sie mir bitte sagen, wie ich der Schaltfläche ein Schaltflächenklickereignis zuweisen soll? Ich habe dies wie folgt in meiner Teilansicht getan. Csml; <script> $ (document) .ready (function () {alert ('doc ready'); $ (' #btnSaveComment '). click (function () {alert (' etwas ');});)}; </ script>
— Karthikeyan
Es ist schwer zu sagen, ohne mehr Code zu sehen, aber hier sind einige Vorschläge. Ich gehe davon aus, dass sich sowohl Ihre Schaltfläche als auch Ihr Skript-Tag im modalen Inhalt befinden. 1. Stellen Sie sicher, dass das Element #btnSaveComment gerendert wurde, bevor das Klickereignis registriert wird. Wenn $ ('# btnSaveComment'). Length === 0 ist, wurde das Element nicht zum DOM hinzugefügt. 2. Wenn der MIME-Typ des angeforderten Dokuments nicht Text / HTML ist, wertet jquery die geladenen Skripte nicht aus. Wenn dies der Fall ist, geben Sie an, dass es sich um HTML handelt, indem Sie die untergeordnete Funktion $ .ajax () anstelle von $ .get () verwenden. ( stackoverflow.com/a/2203816/856389 ).
— Brandon Fitzpatrick
5

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

— Tim Kretschmer
quelle
0

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>
— yardpenalty.com
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.