Offene Bootstrap-4 Modal via JavaScript durch klicken auf einen link

Möchte ich zum öffnen eines modalen wenn ich auf einen link klicken.
Leider konnte ich nicht ändern Sie den HTML-Code der link. Ich konnte nur ändern Sie den Inhalt href.

Wie diese:

<a href="#Modal">Open modal</a>

Konnte ich nicht hinzufügen-Daten-Attribute (oder jede andere HTML.

In den docs habe ich einen Weg gefunden, zu öffnen am modal via JavaScript. Hinzugefügt habe ich diesen code auf meiner Website:

$('#Modal').modal();

Es funktioniert, aber das modal öffnet sich sofort nach dem laden der Seite.
Ich muss es öffnen, nachdem ich auf den link klicken.

Gibt es eine Möglichkeit, dies zu tun?

Hier ist meine modal:

<div class="modal" id="Modal" tabindex="-1" role="dialog" aria-labelledby="ModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <p class="h5 modal-title" id="ModalTitle">Modal Title</p>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                Content
            </div>
        </div>
    </div>
</div>
$('#Modal') bezieht sich auf ein element mit id="Modal".
OK, ich könnte hinzufügen id="Modal" aber, dass doens nicht helfen 🙁
Cray hast du das probiert ? stackoverflow.com/questions/11404711/...
versucht schon, aber es funktioniert nicht
können Sie fügen Sie Ihre html-und js.

InformationsquelleAutor Cray | 2018-05-07

  1. 2

    brauchen, es zu öffnen, nachdem ich auf den link klicken.

    So dass Sie brauchen, um zu überprüfen, ob der link angeklickt wird.

    jQuery bietet viele Möglichkeiten, um ein element auszuwählen. http://api.jquery.com/category/selectors/

    $('a[href$="#Modal"]').on( "click", function() {
   $('#Modal').modal();
});`
    danke, aber das funktioniert nicht 🙁
    Ich sah Sie schon bekam eine korrekte Antwort, aber ich wollte nur sicher sein. jsfiddle.net/Ldnzn5bn Ist ein funktionierendes Beispiel.
    vielen Dank für Ihre Hilfe!

    InformationsquelleAutor

  2. 0

    Versuchen, diese 

    <!-- Trigger the modal with a button -->
<a href="#" class="btn btn-info btn-lg">Open Modal</a>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Modal Header</h4>
  </div>
  <div class="modal-body">
    <p>Some text in the modal.</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>

  </div>
</div>


$('a').on( "click", function() {
   $('#myModal').modal('show');
});
    wie ich schrieb in meiner Frage, ich bin nicht in der Lage, verwenden Sie eine Schaltfläche, oder ändern Sie den html-von meine link-tag
    ok nur ändern, um das a-tag

    InformationsquelleAutor Ryuk Lee

Schreibe einen Kommentar