Bootstrap modal nicht an allen

Question

Arbeits ich diese Frage wissen, hat vor hundert Mal gefragt worden, und ich habe durch sie gewesen, aber diejenigen, könnte meinen Fall nicht beheben: s

Dies ist mein Code so weit

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"> 
    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script> 
    <link href="bootstrap/js/bootstrap.min.js" rel="stylesheet" media="screen"> 
    <link href="bootstrap/js/bootstrap-modal.js" rel="stylesheet" media="screen"> 
    <link href="bootstrap/js/bootstrap-transition.js" rel="stylesheet" media="screen"> 

und im Inneren des Körpers ich habe dies:

<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a> 

<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> 

Bitte beachte, dass ich einige andere Bibliotheken auf dem Kopfteil verwenden, weil ich sie für Google Map vielleicht brauchen, habe ich versucht, diejenigen zu entfernen, aber immer noch auslösen nicht die Modal v iew.

Answer 1

Sie haben alle Ihre Skripte und CSS-Dateien in einem Skript-Tag geladen - nehmen Sie das Skript-Tag, das den Rest umschließt.

Answer 2

Sie sollten die CSS-Datei nicht innerhalb des Tags platzieren!

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> 
<link rel="stylesheet" type="text/css" href="style.css"> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"> </script> 
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script> 
<link href="bootstrap/js/bootstrap.min.js" rel="stylesheet" media="screen"> 
<link href="bootstrap/js/bootstrap-modal.js" rel="stylesheet" media="screen"> 
<link href="bootstrap/js/bootstrap-transition.js" rel="stylesheet" media="screen"> 

Answer 3

Fügen Sie diese Zeile Javascript

Datei

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

Answer 4

Sie laden Ihre Skripte falsch (einige sind wie Sheets geladen, einige haben nicht das Schließen Script-Tag).

Es sollte:

meine komplette Lösung veröffentlichen

<!--STYLESHEETS--> 
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> 
    <link rel="stylesheet" type="text/css" href="style.css"> 

    <!--SCRIPTS - MAKE SURE THE PATH IS RIGHT FOR THE BOOTSTRAP SCRIPTS--> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"> </script> 
    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script> 
    <script src="bootstrap/js/bootstrap.min.js"></script> 
    <script src="bootstrap/js/bootstrap-modal.js"></script> 
    <script src="bootstrap/js/bootstrap-transition.js"></script 

Answer 5

Bevor ich wissen möchte, haben Sie Ihre modal es vor dem Laden initialisiert. Initialisierung: -

$(function(){ 
$('#myModal').modal({ 
    show:true, 
    backdrop:'static' 
}); 
//now on button click 
    $('#myModal').modal('show'); 
}); 

Answer 6

ich das gleiche Problem haben; Nach langer Analyse finde ich die Lösung: Hinzufügen von "style =" display: none; "auf div modal. Ich weiß nicht warum, aber wenn Sie die Seite laden, ist das modale versteckt, aber wenn Sie mit firebug inspizieren die modald die Dropdown wiederherstellen Nachdem das Modal angezeigt und es ausgeblendet wurde, fügt die js "style =" - Anzeige hinzu: none; " und Dropdown funktioniert.

Answer 7

Verwendung unter Online-Bootstrap-Bibliothek oder Download from here

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 

und fügen Sie diesen Link vor bootstrap.js Link

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

Cz Bootstrap-Modell

und nicht mit älterem JS Editions (Can check here) Arbeits Bootstrap-Modell entfernen hide Klasse von hier class="modal fade"

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 

sollte dies perfekt funktionieren.

Answer 8

haben Sie die CDN verwendet oder popper.js Datei, wenn Sie nicht popper.js Datei enthalten, die Sie nicht in der Lage sein, Ihre modale Fenster Check die unten CDN und unter jquery.js und bootstrap.js setzen, um zu sehen, wie unten

folgt nun

<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.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> 

es wird zu 100% arbeiten, wenn ich nicht eine andere Lösung haben den Code unten kopieren und überprüfen sie es

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

<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> 

Answer 9

die Lösung ist einfach, entfernen Sie einfach die Rolle = „Dialog“ Attribut aus dem Anker-Tag:

<a href="#myModal" data-toggle="modal">Open Modal</a>