Verwenden Sie modale mit der externen URL Körpers und dynamische Verknüpfungen von Daten-Attribut

Ich versuche, mich ein Bootstrap modal mit externen link.

Dies ist, was ich getan habe, bis jetzt, aber es gibt einige syntax-Fehler, denke ich:

<html>
    <head>
        <link type="text/css "rel="stylesheet" href="/assets/css/bootstrap.min.css" />
    </head>
    <body>
        <a href="#popUp" id="popUp" data-href="/test1.php">1</a>
        <a href="#popUp" id="popUp" data-href="/test2.php">2</a>
        <div class="modal fade" id="popUpModal" tabindex="-1" role="dialog" aria-labelledby="popUpModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="popUpModalLabel">PopUp</h4>
                    </div>
                    <div class="modal-body">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="/assets/js/jquery.1.10.2.min.js"></script>
        <script type="text/javascript" src="/assets/js/bootstrap.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#popUp').click(function() {
                    $('#popUpModal .modal-body').load(('#popUp').data('href'), function(e) {
                        $('#popUpModal').modal('show')
                    })
                })
            }
        </script>
    </body>
</html>

Grundsätzlich, die Idee ist, zu öffnen /test1.php als modal (popUpModal) wenn ich auf 1 und /test2.php wenn ich auf 2.

Sie haben eine fehlende ) am Ende des scripts, was sollte in der Nähe der .ready( ID sollte eindeutig sein in HTML, und du hast 2 div mit der gleichen ID popUp
Ich habe Hinzugefügt die fehlen ), aber wenn ich verschiedene IDs werde ich das tun müssen verschiedene JS für jeden von Ihnen... gibt es nicht irgendeine andere Möglichkeit?
Es ist, siehe meine Antwort.

InformationsquelleAutor Kupigon | 2014-12-30

  1. 1

    Haben Sie einen fehlenden ) am Ende des scripts, was sollte in der Nähe der .bereit (- ID sollte eindeutig sein in HTML, und du hast 2 div mit der gleichen ID-popUp.

    Ändern Sie Ihre popup-links id zu class und verwenden $(this).data('href') laden:

    <a href="#popUp" class="popUp" data-href="/test1.php">1</a>
<a href="#popUp" class="popUp" data-href="/test2.php">2</a>

    Und das Skript:

    $(document).ready(function() {
    $('.popUp').click(function() {
        $('#popUpModal .modal-body').load($(this).data('href'), function(e) {
            $('#popUpModal').modal('show')
        });
    });
});
    Danke!!! Funktioniert perfekt 🙂 ich habe versucht diese Arbeit zu machen, da ich 100+ popup-Fenster in meine Seite.
    Sie sind herzlich willkommen!

    InformationsquelleAutor vaso123

  2. 0

    In v3.1 die oben beschriebenen Verhalten geändert wurde und jetzt die remote-Inhalte geladen werden .modal-content 

    <a data-toggle="modal" href="http://fiddle.jshell.net/bHmRB/51/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 -->

    Fiddle
    http://jsfiddle.net/koala_dev/NUCgp/918/

    Ich weiß, aber ich möchte die dynamische Verknüpfung von data-href-Attribut, da ich nicht wollen, erstellen Sie mehrere modals in meine Seite.

    InformationsquelleAutor Miomir Dancevic

Schreibe einen Kommentar