Warum funktioniert mein Modal nicht? Bootstrap4

Ich frage mich, warum mein Bootstrap 4 Modal nicht funktioniert. Irgendeine Ahnung? Ich kopiere buchstäblich und kopiere von der Bootstrap 4 Web site (http://v4-alpha.getbootstrap.com/components/modal/#live-demo) Auch ich habe js hinzugefügt, die sie sagen.Warum funktioniert mein Modal nicht? Bootstrap4

Hier finden Sie den Code.

Dank

Ich habe andere Beiträge geprüft und ich Glück

$('#myModal').on('shown.bs.modal', function() { 
 
    $('#myInput').focus() 
 
})

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
 
    <meta content="Description" name="description"> 
 
    <meta content="index,follow" name="robots"> 
 
    <link href="/images/myicon.png" rel="icon" type="image/png"> 
 
    <title>TITLE HERE</title> 
 
    <!--CSS--> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"> 
 

 
    <!--Bootstrap CSS JS--> 
 
    <!--fonts--> 
 

 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> 
 
</head> 
 

 
<body> 
 

 
    <!--CB-modal --> 
 
    <!-- Button trigger modal --> 
 
    <!-- Button trigger modal --> 
 
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> 
 
    Launch demo modal 
 
</button> 
 

 
    <!-- Modal --> 
 
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 
 
    <div class="modal-dialog" role="document"> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> 
 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
 
      <span aria-hidden="true">&times;</span> 
 
     </button> 
 
     </div> 
 
     <div class="modal-body"> 
 
      ... 
 
     </div> 
 
     <div class="modal-footer"> 
 
      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
 
      <button type="button" class="btn btn-primary">Save changes</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</body> 
 
<!-- JS code --> 
 
<script src="https://code.jquery.com/jquery-3.1.1.min.js"> 
 
</script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"> 
 
</script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"> 
 
</script> 
 
<!--JS below--> 
 

 

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

 

 

 
</html>

Quelle

2017-02-24 Anonymous

Es heißt in der Konsole, die Sie einen Syntaxfehler haben. Versuchen Sie, Ihr Code-Snippet auszuführen, Sie werden es auch sehen. –

Sie haben $ ("# MyModal") Selektor angegeben und Ihre modale ID ist id = "myModal" korrigieren Sie es. Auch data-target = "# exampleModal" ist falsch, da Ihre Modal-ID "myModal" lautet. – xurca

Dieser Fehler scheint tatsächlich in der v4-Dokumentation enthalten zu sein. Nicht schwer zu fangen, wenn man aufpasst, aber nervt, dass das Kopieren/Einfügen eines reinen Beispiels nicht funktioniert. – rob

Es gibt Tippfehler in Ihrem Code-Schnipsel (ungebrauchte }); am Ende) nicht habe Am wichtigsten ist jedoch, dass die Umschalttaste auf die falsche modale ID ausgerichtet ist. Stellen Sie sicher, data-target ist die ID des modalen Sie Targeting:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> 
    Launch demo modal 
</button>

Demo:

$('#myModal').on('shown.bs.modal', function() { 
 
    $('#myInput').focus() 
 
})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"> 
 

 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> 
 

 
<!--CB-modal --> 
 
<!-- Button trigger modal --> 
 
<!-- Button trigger modal --> 
 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> 
 
    Launch demo modal 
 
</button> 
 

 
<!-- Modal --> 
 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
 
      <span aria-hidden="true">&times;</span> 
 
     </button> 
 
     </div> 
 
     <div class="modal-body"> 
 
     ... 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
 
     <button type="button" class="btn btn-primary">Save changes</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<!-- JS code --> 
 
<script src="https://code.jquery.com/jquery-3.1.1.min.js"> 
 
</script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"> 
 
</script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"> 
 
</script> 
 
<!--JS below--> 
 

 

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

 

 

 
</html>

bearbeiten: Aktualisiert Bootstrap 4-beta als pro @OlavT Anfrage:

$('#myModal').on('shown.bs.modal', function() { 
 
    $('#myInput').focus() 
 
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
 

 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> 
 

 
<!--CB-modal --> 
 
<!-- Button trigger modal --> 
 
<!-- Button trigger modal --> 
 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> 
 
    Launch demo modal 
 
</button> 
 

 
<!-- Modal --> 
 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
 
      <span aria-hidden="true">&times;</span> 
 
     </button> 
 
     </div> 
 
     <div class="modal-body"> 
 
     ... 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
 
     <button type="button" class="btn btn-primary">Save changes</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<!-- JS code --> 
 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> 
 
<!--JS below--> 
 

 

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

 

 

 
</html>

Quelle

2017-02-24 11:57:25 AVAVT

Hat jemand das mit Bootstrap 4.0.0-Beta getestet? Ich konnte das Modal nicht zeigen. – OlavT

@OlavTI hat es gut gelaufen. Sind Sie sicher, dass Sie alle benötigten Dateien importiert haben? Sehen Sie meine bearbeitete Antwort für v4-Beta-Demo. – AVAVT

Ich habe es wieder arbeiten lassen. Es scheint, dass es mit einigen Problemen mit meiner lokalen popper.js Datei verursacht wurde. Wenn es von einem CDN verwendet wird, funktioniert es gut. – OlavT

<script> 
    $(document).ready(function() { 
    $("#MyModal").modal(); 
    $('#myModal').on('shown.bs.modal', function() { 
     $('#myInput').focus(); 
    }); 
    }); 
</script>

Quelle

2017-02-24 11:54:18 JMF

Sie haben einige Skriptfehler und Ihre data-target="#exampleModal" nicht mit dem Modell der ID

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
 
    <meta content="Description" name="description"> 
 
    <meta content="index,follow" name="robots"> 
 
    <link href="/images/myicon.png" rel="icon" type="image/png"> 
 
    <title>TITLE HERE</title> 
 
    <!--CSS--> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"> 
 

 
    <!--Bootstrap CSS JS--> 
 
    <!--fonts--> 
 

 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> 
 
</head> 
 

 
<body> 
 

 
    <!--CB-modal --> 
 
    <!-- Button trigger modal --> 
 
    <!-- Button trigger modal --> 
 
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> 
 
    Launch demo modal 
 
</button> 
 

 
    <!-- Modal --> 
 
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 
 
    <div class="modal-dialog" role="document"> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> 
 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
 
      <span aria-hidden="true">&times;</span> 
 
     </button> 
 
     </div> 
 
     <div class="modal-body"> 
 
      ... 
 
     </div> 
 
     <div class="modal-footer"> 
 
      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
 
      <button type="button" class="btn btn-primary">Save changes</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</body> 
 
<!-- JS code --> 
 
<script src="https://code.jquery.com/jquery-3.1.1.min.js"> 
 
</script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"> 
 
</script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"> 
 
</script> 
 
<!--JS below--> 
 

 

 
<!--modal--> 
 
<script> 
 
    $(document).ready(function() { 
 
    $("#MyModal").modal(); 
 
    $('#myModal').on('shown.bs.modal', function() { 
 
     $('#myInput').focus(); 
 
    }); 
 
    }); 
 
</script> 
 

 

 

 
</html>

Quelle

2017-02-24 11:58:43 Sankar

Sieht aus wie die Daten-Zielnamen in nicht korrekt eingegeben entsprechen. Hier ist der richtige Code Ihrer Schaltfläche

 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> 
    Launch demo modal 
</button>

Quelle

2017-02-24 12:02:35

Ihr Datenziel falsch ist: #exampleModal sollte #myModal sein.

auch, haben Sie eine falsche Syntax in Ihrem js Code

$(document).ready(function() { 
    $("#MyModal").modal(); 
    }); 
    })//remove this

$('#myModal').on('shown.bs.modal', function() { 
 
    $('#myInput').focus() 
 
});

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
 
    <meta content="Description" name="description"> 
 
    <meta content="index,follow" name="robots"> 
 
    <link href="/images/myicon.png" rel="icon" type="image/png"> 
 
    <title>TITLE HERE</title> 
 
    <!--CSS--> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"> 
 

 
    <!--Bootstrap CSS JS--> 
 
    <!--fonts--> 
 

 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> 
 
</head> 
 

 
<body> 
 

 
    <!--CB-modal --> 
 
    <!-- Button trigger modal --> 
 
    <!-- Button trigger modal --> 
 
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> 
 
    Launch demo modal 
 
</button> 
 

 
    <!-- Modal --> 
 
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 
 
    <div class="modal-dialog" role="document"> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> 
 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
 
      <span aria-hidden="true">&times;</span> 
 
     </button> 
 
     </div> 
 
     <div class="modal-body"> 
 
      ... 
 
     </div> 
 
     <div class="modal-footer"> 
 
      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
 
      <button type="button" class="btn btn-primary">Save changes</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</body> 
 
<!-- JS code --> 
 
<script src="https://code.jquery.com/jquery-3.1.1.min.js"> 
 
</script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"> 
 
</script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"> 
 
</script> 
 
<!--JS below--> 
 

 

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

 

 

 
</html>

Quelle

2017-02-24 12:17:42

ich hier gelandet, weil ich den gleichen Fehler aufwies, wurde. Nach dem Zurückgehen und ein bisschen lesen. Ich stieß auf Folgendes:

Wenn Sie unser kompiliertes JavaScript verwenden, vergessen Sie nicht, zuvor CDN-Versionen von jQuery und Popper.js einzuschließen.

Da ich Bootstrap 4 heruntergeladen und die Ordner kopiert habe, wie ich es mit Bootstrap v3 gewohnt war, nahm ich an, es würde alles funktionieren.

Download-Bereich hat das CDN für Popper und jQuery

https://getbootstrap.com/docs/4.0/getting-started/download/

hoffe, das hilft ... Nessio

Quelle

2017-08-29 04:02:44

Warum funktioniert mein Modal nicht? Bootstrap4

Antwort

Verwandte Themen