Bootstrap modalne nie działa w ogóle

Question

Wiem, że to pytanie zostało zadane setki razy wcześniej i byłem przez nich, ale tych, którzy nie byli w stanie rozwiązać mój przypadek: s

To jest mój kod tak daleko

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

i wewnątrz ciała mam to:

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

pamiętać, że korzystać z innych bibliotek w sekcji head, bo trzeba je dla Google Map może starałem się usunąć tych, ale nadal nie wyzwolić Modal v iew.

Answer 1

Masz wszystkie swoje skrypty i pliki css załadowane wewnątrz znacznika skryptu - usuń znacznik skryptu, który zawija resztę.

Answer 2

Nie należy umieszczać pliku CSS wewnątrz tagu!

<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

Dodaj ten wiersz do pliku JavaScript

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

Answer 4

Ty wczytywania skryptów źle (niektóre są ładowane jak arkusze stylów, niektóre nie mają tag skryptu zamknięcia).

Powinno być:

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

Przed wysłaniem mojego kompletnego rozwiązania chciałbym wiedzieć, masz zainicjowany swoją modal przed załadowaniem. Inicjalizacja: -

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

Answer 6

Mam ten sam problem; Po długiej analizie znajduję rozwiązanie: Dodanie "style =" display: none; "na div modal. Nie wiem dlaczego, ale kiedy ładujesz stronę modal jest ukryty, ale jeśli sprawdzasz firebugem modal odzyskaj dropdown Po pokazaniu modalu i ukryciu go, js doda "style =" display: none; " i rozwijane działa.

Answer 7

Zastosowanie poniżej biblioteki bootstrap online lub 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> 

i wklej ten link przed bootstrap.js linku

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

Cz modelu bootstrap nie działa ze starszymi JS limitowane (Can check here)

iw model bootstrap usuń klasę hide z tego miejsca

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

to powinno działać idealnie.

Answer 8

masz używane CDN lub plik popper.js Jeśli nie obejmują popper.js plik nie będziecie mogli zobaczyć swoje okna modalne sprawdź poniżej CDN i umieścić poniżej jquery.js i bootstrap.js następująco poniżej

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

teraz to będzie działać w 100%, jeśli nie mam innego rozwiązania skopiuj poniższy kod i sprawdzić to

<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

Rozwiązanie jest proste, wystarczy usunąć role = „dialog” z atrybutem znacznika zakotwiczenia:

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