Wie kann ich die Wiederverwendung eines Bootstrap-modal-div?

Ich würde gerne in der Lage sein, um eine Reihe von verschiedenen links auf einer Seite wiederverwenden einer modal-div über Bootstrap-modal-plugin:

<h3>This button shows a modal (<code>#utility</code>) with text "Phasellus <em>tincidunt gravida</em>..."</h3>
<br />
<a id="file_attach" data-toggle="modal" href="http://fiddle.jshell.net/jhfrench/6K8rD/show/" data-target="#utility" class="btn">Modal 1</a><br />
<h3>This button should invoke the same modal (<code>#utility</code>), but fill it with text "Phasellus <em>egestas est eu</em>..."</h3>
<br />
<a id="file_attach" data-toggle="modal" href="http://fiddle.jshell.net/jhfrench/AWSnt/show/" data-target="#utility" class="btn">Modal 2</a><br />

<!-- Modal -->
<div id="utility" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3 id="myModalLabel">Click outside modal to close it</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…this is getting replaced with content that comes from passed-in href</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

Ich würde erwarten, dass ein Klick auf einen der Links (was sind gestaltet wie buttons) aufrufen würde den modal und laden Sie die modale mit der Seite (Wert href) entsprechend der angeklickten Schaltfläche. Stattdessen werden die modalen lädt stets mit dem Inhalt von dem link, den Sie klicken Sie auf erste; der modal-nicht "refresh" mit dem Inhalt, dass sollte bestimmt werden, indem href von der "anderen" - link.

Ich denke, das ist eine Bootstrap-Fehler, aber ich bin mit der Frage hier in den Fall bin ich mit es falsch.

Finden Sie http://jsfiddle.net/jhfrench/qv5u5/ für eine demonstration.

  • haben Sie versucht, rufen Sie die Funktion removeData? So etwas wie: $('body').auf('hidden', '.modal', function () { $(this).removeData('modal'); });
  • habe es versucht (siehe fiddle), aber keine Freude.
InformationsquelleAutor Jeromy French | 2012-12-26
  1. 15

    Nach weiterer recherche fand ich ein paar Bootstrap-Themen, in denen dieses Verhalten hier und hier. Ich habe gefragt, für Problem 5514 geöffnet werden.

    Mittlerweile, das jQuery-patch wird das problem*:

    $('a[data-toggle="modal"]').on('click', function(){
    //update modal header with contents of button that invoked the modal
    $('#myModalLabel').html( $(this).html() );
    //fixes a bootstrap bug that prevents a modal from being reused
    $('#utility_body').load(
        $(this).attr('href'),
        function(response, status, xhr) {
            if (status === 'error') {
                //console.log('got here');
                $('#utility_body').html('<h2>Oh boy</h2><p>Sorry, but there was an error:' + xhr.status + ' ' + xhr.statusText+ '</p>');
            }
            return this;
        }
    );
});​

    Finden Sie http://jsfiddle.net/jhfrench/qv5u5/51/ für ein Beispiel.*

    *-Für einige Grund, manchmal beim klicken auf die Schaltfläche in der fiddle der modal zeigen leer. Dies ist nicht ein problem in der Anwendung arbeite ich mit, so dass ich vermute, es ist ein problem, unabhängig von dieser Frage/Antwort.

    • Diese Antwort auf allen Browsern funktioniert und erlaubt mir, passen Sie die Bezeichnung ein bit mehr pro-link mit jQuery-Selektoren. Danke!
    • Das hat Super funktioniert! Hoffentlich wird dies gepatcht, um die Haupt-Bootstrap-Zweig.
    • obwohl der OP sagte, der Ansatz $(this).removeData('modal'); funktioniert nicht, ich habe es gut funktioniert auf die gleiche Geige. Könnten Sie erklären, wie Ihr patch funktioniert besser als die removeData ?
    • Nur ein heads-up alle, die zur Wiederverwendung bestimmten modal(s), aber immer noch wollen zu können, legen Sie entweder zwei modals auf einmal oder nicht über-schreiben, die vorherigen Daten in einer bestimmten modal (aus welchem Grund auch immer, D. H. zu verhindern, zusätzlichen ajax-Anfragen für Daten, die bereits geladen). Wenn dies für Sie ist, legen Sie die folgende Zeile: var target_modal_id_str = $(this).Daten("target"); als erste Zeile in die beim klicken-bindende Funktion, und verwenden Sie dann $(target_modal_id_str) als der Gültigkeitsbereich modal-container. Gerade lief in dieses Problem mich, so dass ich dachte, ich würde Aktie die Lösung.
    InformationsquelleAutor Jeromy French
  2. 5

    Anstatt zu schreiben, html-markups aus modal und zu manipulieren, es per javascript, würde ich die Verwendung von Bootstrap-Dialogfeld zu erleichtern alles:

    $('.modal-btn').click(function(event){
    var $link = $(this);
    new BootstrapDialog({
        title   :   'Load content of : ' + $link.attr('href'),
        content :   $('<div>Loading...</div>').load($link.attr('href')),
        buttons :   [{
            label   :   'Close',
            onclick :   function(dialog){
                dialog.close();
            }
        }, {
            label   :   'Save changes',
            cssClass:   'btn-primary',
            onclick :   function(dialog){
                alert('The content of the dialog is: ' + dialog.getBody().html());
                dialog.close();
            }
        }]
    }).open();

    event.preventDefault();
});

    Hier finden Sie eine live-demo, lädt er die beiden urls, die Sie in Ihrem Beispiel:
    http://jsfiddle.net/txrM8/

    Sehen Sie mehr über Bootstrap-Dialogfeld:
    http://nakupanda.github.io/bootstrap-dialog/

    InformationsquelleAutor nakupanda
Schreibe einen Kommentar