it-swarm.com.de

Wie öffne ich ein Bootstrap modales Fenster mit jQuery?

Ich verwende die modalen Fensterfunktionen von Twitter Bootstrap. Wenn jemand auf "Senden" in meinem Formular klickt, möchte ich das modale Fenster anzeigen, wenn ich auf die Schaltfläche "Senden" im Formular 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();
});
676
user244394

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

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

Sie können hier mehr sehen: Bootstrap-Modal-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, sehen Sie sich das folgende Video eines anderen Community-Mitglieds an:

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

1243
Chase

Darüber hinaus 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.

Sie können mehr hier sehen: http://getbootstrap.com/2.3.2/javascript.html#modals

81
Gandarez

Wenn $('#myModal').modal('show'); nicht funktioniert, liegt dies meist daran, dass jQuery zweimal eingeschlossen wurde. Wenn Sie jQuery 2-mal eingeben, funktionieren Modals 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'); 
72
Peter verleg

Rufen Sie einfach die modale Methode auf (ohne Parameter zu übergeben), indem Sie den Selektor jQuery verwenden.

Hier ist ein Beispiel:

$('#modal').modal();
17
Brane

Wenn Sie die Onclick-Funktion von Links verwenden, um ein Modal von jQuery aufzurufen, darf das "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 angezeigt werden. Der richtige Code lautet:

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

Hier erfahren Sie, wie Sie bootstrap alert laden, sobald das Dokument fertig ist. Es ist sehr einfach, einfach hinzufü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>
10
csandreas1

Schauen Sie sich hier die komplette Lösung an:

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 vorliegen, um das Ergebnis zu erhalten:

1- First 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>
9
A.Aleem11

Ich habe verschiedene Methoden ausprobiert, die fehlgeschlagen sind, aber die folgenden haben für mich wie ein Zauber gewirkt:

$('#myModal').appendTo("body").modal('show');
5
novembersky

Versuchen Sie, jQuery anstelle von $ zu verwenden, wenn Sie die Funktion it aufrufen arbeitete in meinem Fall, wie Sie unten sehen können.

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

jQuery.noConflict (); weil wenn jQuery ('# myModal'). modal ('show'); funktioniert nicht, da jQuery zweimal eingefügt wurde. Wenn Sie jQuery 2-mal eingeben, funktionieren Modals nicht. und es würde das Problem in diesem Fall lösen, wie es in meinem Fall wiederholt wird.

Weiter können Sie zu diesem Link gehen

Bootstrap-Modellfenster wird beim Aufruf über JQuery nicht angezeigt

4
I B

Versuchen

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

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

Wenn dies 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 Reihenfolge 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>
3
<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();
    });
});
3
Alperzkn

Versuche dies

myModal1 ist die ID von modal

$ ('# myModal1'). modal ({show: true});

0
vivek