So zeigen Sie eine URL in der Bootstrap-Modal-dialog: Auf den button klicken

Habe ich eine Seite zu laden (interne URL) in einem modalen Fenster. Ich war mit Fenster.showModalDialog(url, null features), aber das funktioniert nicht richtig auf Safari,Chrome. So haben wir beschlossen, die Verwendung von Bootstrap modal-dialog statt. Ich bin nicht in der Lage diese Arbeit zu machen. Irgendwelche Ideen was ich tun könnte falsch?

    //imports
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">


    //activate content as modal
      $(document).ready(function(){
            $('#test_modal').modal({

                });
    }

    .......
    .......

    $("#btnSubmit").click(function(){
     var url = constructRequestURL();
      $('#test_modal').modal(data-remote=url,data-show="true");
    });


    -----
    -----
    <div class="modal fade" id="test_modal">
</div>
  • können Sie erstellen ein jsfiddle auf die live-demo?
  • ja. Hier ist es: jsfiddle.net/CQkYw/3. Aber ich kann nicht setzen Sie die interne URL, die geladen werden muss.
InformationsquelleAutor agentx | 2013-08-13
  1. 12

    Wenn du gehst, um weiterhin auf dem bootstrap-Pfad, die Sie könnte nehmen Sie einen Blick hier: jsfiddle - remote URI in der Bootstrap 2.3.2 modal

    Beachten Sie, dass die URL muss sich in derselben Domäne (obwohl Sie erwähnt, es ist "intern") oder Ihre domain werden müssen, erlaubt das remote-site-Access-Control-Allow-Origin-Einstellungen. Also denken Sie daran, dass die Geige demo kann nicht wirklich das laden von Inhalten aus example.com.

    <button type="button" class="btn" data-toggle="modal" data-target="#myModal" data-remote="http://example.com">Launch modal</button>

<div id="myModal" class="modal hide fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button>
        <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
       <!-- remote content will be inserted here via jQuery load() -->
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
</div>

    Brauchen Sie nicht zu schreiben benutzerdefinierter JavaScript-Code für dieses - Bootstrap wird wissen, was zu tun ist basierend auf den Daten-Attribute wie data-remote="http://example.com/whatever" und data-target="#myModal" etc.

    Finden Sie im entsprechenden Abschnitt der Bootstrap-modal-docs für mehr info...

    Edit: Es stellt sich heraus, dass das ändern der remote-URL dynamisch ist nicht so einfach, wie es sein könnte. Hoffentlich diese Antwort wird dir weiter helfen.

    • Ja. Aber ich würde nicht wissen, die Daten, die den Gegner bis zur Laufzeit. Wie kann ich dynamisch einrichten?
    • bootstrap wird sich darum kümmern. Sie müssen nur die url in der data-remote Attribut und lassen Sie die <div class="modal-body"></div> leer sein. Die bootstrap-füllen den Körper mit dem Inhalt der url in data-remote
    InformationsquelleAutor codebyren
  2. 0

    Alternativ könnte man die fancy-box. Seine einfache und sauber.

    Werfen Sie einen Blick hier: http://fancyapps.com/fancybox/3/docs/#ajax

    <a data-fancybox data-type="ajax" data-src="my_page.com/path/to/ajax/" href="javascript:;">
AJAX content

    InformationsquelleAutor Ram Pratap
Schreibe einen Kommentar