Wie öffne ich ein modales Bootstrap-Fenster mit jQuery?

769

Ich verwende die modale Fensterfunktionalität von Twitter Bootstrap. Wenn jemand in meinem Formular auf "Senden" klickt, möchte ich das modale Fenster anzeigen, wenn ich im Formular auf "Senden" klicke.

<form id="myform" class="form-wizard">
    <h2 class="form-wizard-heading">BootStap Wizard Form</h2>
    <input type="text" value=""/>
    <input type="submit"/>
</form>

<!-- Modal -->
<div id="myModal" 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">×</button>
        <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</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>

jQuery:

$('#myform').on('submit', function(ev) {
    $('#my-modal').modal({
        show: 'false'
    }); 


    var data = $(this).serializeObject();
    json_data = JSON.stringify(data);
    $("#results").text(json_data); 
    $(".modal-body").text(json_data); 

    // $("#results").text(data);

    ev.preventDefault();
});
javascript jquery twitter-bootstrap user244394
quelle
Sie haben einen Tippfehler in Ihrer Show-Option. Es braucht einen Booleschen Wert, also setzen Sie keine Anführungszeichen um 'false' - $ ('# my-modal'). Modal ({show: false});
Darren Parker

Antworten:

1413

Bootstrap verfügt über einige Funktionen, die bei Modals manuell aufgerufen werden können:

$('#myModal').modal('toggle');
$('#myModal').modal('show');
$('#myModal').modal('hide');

Weitere Informationen finden Sie hier: Modale Bootstrap-Komponente

Speziell der Methodenabschnitt .

Sie müssten also Folgendes ändern:

$('#my-modal').modal({
    show: 'false'
});

zu:

$('#myModal').modal('show');

Wenn Sie ein eigenes benutzerdefiniertes Popup erstellen möchten, finden Sie hier ein vorgeschlagenes Video eines anderen Community-Mitglieds:

https://www.youtube.com/watch?v=zK4nXa84Km4

Verfolgungsjagd
quelle
5
Ich bin mir nicht sicher, warum dies in meinem Fall nicht funktioniert. Ich habe den gleichen Demo-Code auf meiner Seite und habe den Senden-Button wie oben codiert. Wenn ich jedoch auf "Senden" klicke, blinkt das modale Fenster schnell und ist verschwunden. Ich muss auf die Schaltfläche "Zurück" des Browsers klicken, um die Seite zurückzugeben.
Chris22
6
Ich habe die Antwort hier zu meinem Kommentar oben gefunden. Doppelter Link zu bootrap.js auf den Seiten der Website.
Chris22
1
Ungefangener TypeError: $ (...). Modal ist keine Funktion. Dies bin wahrscheinlich ich, aber irgendwelche Ideen, warum ich diesen Fehler bekomme? (Ich habe jQuery)
Vladimir verleg
4
Ich fand mein Problem heraus und rief eine Datei mit Jquery an. Wenn jQuery zweimal enthalten ist, funktioniert es nicht!
Vladimir verleg
2
Ich habe versucht, .modal('show')aber in Google Chrome Browser funktioniert es nicht
Durga
89

Zusätzlich können Sie über Datenattribut verwenden

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

In diesem speziellen Fall müssen Sie kein Javascript schreiben.

Weitere Informationen finden Sie hier: http://getbootstrap.com/2.3.2/javascript.html#modals

Gandarez
quelle
4
Zur Verdeutlichung: "Sie müssen kein Javascript verwenden" bedeutet "Sie müssen kein Javascript schreiben". Javascript wird weiterhin verwendet. Ich habe versucht, die Antwort zu bearbeiten, aber sie wurde abgelehnt, weil sie nicht "genauer" war. Wenn Sie den obigen Code mit deaktiviertem Javascript versuchen, funktioniert er nicht. Das heißt, Sie verwenden Javascript für mich.
Npretto
83

Wenn $('#myModal').modal('show');dies nicht funktioniert, wird jQuery meistens zweimal eingeschlossen. Durch zweimaliges Einschließen von jQuery funktionieren Modalitäten nicht.

Entfernen Sie einen der Links, damit es wieder funktioniert.

Darüber hinaus verursachen einige Plugins auch Fehler, in diesem Fall hinzufügen 

jQuery.noConflict(); 
$('#myModal').modal('show');
Vladimir verleg
quelle
3
DataTables mit seiner vorgefertigten jQuery-Version hat dies für mich verursacht
Wesley Smith
2
Vielen Dank. Ich habe das gleiche Problem: Modal ist keine Funktion. Aber nach dem Hinzufügen von jQuery.noConflict () funktioniert es.
Jobayer Ahmmed
1
Es ist zu beachten, dass diese Problemumgehung nur verwendet werden sollte, wenn Sie die Grundursache nicht lösen können (dh jQuery nur einmal einschließen). Wenn ein Plugin eines Drittanbieters es enthält, suchen Sie entweder nach der nicht enthaltenen Version oder wenden Sie sich an den Drittanbieter, um eine zu erstellen.
Rybo111
19

Rufen Sie einfach die modale Methode (ohne Parameter zu übergeben) mit dem jQuerySelektor auf.

Hier ist ein Beispiel:

$('#modal').modal();
Brane
quelle
1
Wie übergebe ich mehr Parameter an mein Modal? Zum Beispiel eine bestimmte (dynamische) ID?
Pathros
1
Wie können Sie Ihre ID dynamisch gestalten? Schaffst du es per ID? Wenn ja, können Sie die Funktion $ (this) von jQuery verwenden, um das aktuelle Objekt auszuwählen und Parameter an ihn zu übergeben.
Brane
13

Wenn Sie die Onclick-Funktion von links verwenden, um ein Modal von jQuery aufzurufen, darf "href" nicht null sein.

Zum Beispiel:

... ...
<a href="" onclick="openModal()">Open a Modal by jQuery</a>
... ...
... ...
<script type="text/javascript">

function openModal(){

    $('#myModal').modal();
}       
</script>

Der Modal kann nicht anzeigen. Der richtige Code lautet:

<a href="#" onclick="openModal()">Open a Modal by jQuery</a>
saneryee
quelle
12

Hier erfahren Sie, wie Sie die Bootstrap-Warnung laden, sobald das Dokument fertig ist. Es ist sehr einfach, einfach hinzuzufügen

 $(document).ready(function(){
   $("#myModal").modal();
});

Ich habe eine Demo auf W3Schools gemacht.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Here is how to load a bootstrap modal as soon as the document is ready </h2>
  <!-- Trigger the modal with a button -->


  <!-- Modal -->
  <div class="modal fade" id="myModal" 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>
  
</div>

<script>
$(document).ready(function(){
   $("#myModal").modal();
});
</script>

</body>
</html>
Erweitern Sie das Snippet

csandreas1
quelle
10

Hier finden Sie die Komplettlösung:

http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_modal_show&stacked=h

Stellen Sie sicher, dass die Bibliotheken in der erforderlichen Reihenfolge angeordnet sind, um das Ergebnis zu erhalten:

1- Erste bootstrap.min.css 2- jquery.min.js 3- bootstrap.min.js

(Mit anderen Worten, jquery.min.js muss vor bootstrap.min.js aufgerufen werden.)

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script> 

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
A.Aleem11
quelle
7

Ich habe verschiedene Methoden ausprobiert, die fehlgeschlagen sind, aber das Folgende hat für mich wie ein Zauber funktioniert:

$('#myModal').appendTo("body").modal('show');
das Übliche
quelle
2
Gleich! Dies ist die einzige Lösung, die auch für mich funktioniert hat.
Pengz
Bist du sicher, dass es nicht wollte .appendTo("modal-body")?
James A Mohler
@novembersky, Sie müssen den Code entweder in das Klickereignis oder beim Laden der Seite mit jquery einfügen: $ (document) .ready (function () {$ ("# myModal"). modal ();});
Abhijit Kumar
7

Versuchen Sie, beim Aufrufen der Funktion jQuery anstelle von $ sign zu verwenden. In meinem Fall hat dies funktioniert, wie Sie unten sehen können.

jQuery.noConflict(); 
jQuery('#myModal').modal('show');

jQuery.noConflict (); denn wenn jQuery ('# myModal'). modal ('show'); funktioniert nicht, es wird dadurch verursacht, dass jQuery zweimal eingeschlossen wurde. Durch zweimaliges Einschließen von jQuery funktionieren Modalitäten nicht. und es würde das Problem in diesem Fall lösen, da es sich in meinem Fall wiederholt.

Weiter können Sie zu diesem Link gehen

Das Bootstrap-Modellfenster wird beim Aufrufen über JQuery nicht angezeigt

IB
quelle
4

Versuchen

$("#myModal").modal("toggle")

Zum Öffnen oder Schließen des Modals mit der ID myModal.

Wenn das oben genannte nicht funktioniert, bedeutet dies, dass bootstrap.js von einer anderen js-Datei überschrieben wurde. Hier ist eine Lösung

1: - Verschieben Sie bootstrap.js nach unten, damit andere js-Dateien überschrieben werden.

2: - Stellen Sie sicher, dass die Bestellung wie folgt ist

<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Other js files -->
<script src="plugins/jQuery/bootstrap.min.js"></script>
Nikhil Mohadikar
quelle
4 
<form id="myform" class="form-wizard">
    <h2 class="form-wizard-heading">BootStap Wizard Form</h2>
    <input type="text" value=""/>
    <input type="submit" id="submitButton"/>
</form>

<!-- Modal -->
<div id="myModal" 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">×</button>
        <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</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>

Sie können das Modal mit dem Code darunter starten.

$(document).ready(function(){
    $("#submitButton").click(function(){
        $("#myModal").modal();
    });
});
Alperzkn
quelle
1

Versuche dies

myModal1 ist die ID von modal

$('#myModal1').modal({ show: true });
vivek
quelle
0 
<script type="text/javascript">
    $(function () {
        $("mybtn").click(function () {
            $("#my-modal").modal("show");
        });
    });
</script>
Sahnosh Rahguzar
quelle
3
Wenn Sie Fragen beantworten, auf die bereits Antworten vorliegen, versuchen Sie bitte, die vorhandenen Antworten zu erweitern. Außerdem ist es im Allgemeinen eine gute Idee, eine Erklärung beizufügen, wie Ihr Code die Frage beantwortet.
Chris Camaratta
0

Bootstrap 4.3 - mehr hier

Code-Snippet anzeigen

Kamil Kiełczewski
quelle