Twitter Bootstrap Modal - Szare tło ale bez okna

Mam trochę dziwny problem z Twitter Bootstrap i nie-JS przykład modalnych, co się dzieje, że modalne tło pojawia się (szarości), ale okno nie .Twitter Bootstrap Modal - Szare tło ale bez okna

Znalazłem, jeśli usunę "klasę" z modalnego okna div, załaduje się, ale nie będzie poprawnie.

skrzypcach jest tutaj: http://jsfiddle.net/2VbUG/1/

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="description" content=""> 
    <meta name="author" content="John Moss - Stolen Bikes UK"> 
    <title>Title</title> 

    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> 

    <!-- Optional theme --> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css"> 

    <!-- Custom styles for this template --> 
    <link href="assets/css/style.css" rel="stylesheet"> 

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!--[if lt IE 9]> 
     <script src="assets/js/html5shiv.js"></script> 
     <script src="assets/js/respond.min.js"></script> 
    <![endif]--> 
</head> 
<body> 
    <div class="navbar navbar-inverse navbar-fixed-bottom"> 
     <div class="container"> 
     <div class="col-lg-12 sign"> 
       <a href="#myModal" role="button" class="btn btn-lg btn-danger" data-toggle="modal">Sign!</a> 
     </div> 
     </div> 
    </div> 
    <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">Sign This Petition!</h3> 
     </div> 
     <div class="modal-body"> 
      <p>Fields for the signatures here, take some from the facebook API</p> 
     </div> 
     <div class="modal-footer"> 
      <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
      <button class="btn btn-primary">Sign Now!</button> 
     </div> 
    </div> 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="//code.jquery.com/jquery.js"></script> 
    <!-- Bootstrap core JavaScript 
    ================================================== --> 
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
</body> 
</html>

Kod pochodzi z tego samouczka na siłach stronie http://getbootstrap.com/2.3.2/javascript.html#modals

Źródło

2013-08-31 John Moss

Ty przedstawieniu bootstrap wersja 3 css ale używając przykładowy kod w wersji 2.

Spróbuj użyć version 3 example code.

Źródło

2013-08-31 23:28:55 embee

myślę używasz Bootstrap 3.0 JavaScript i CSS, ale przy użyciu zasobów Bootstrap 2.3.2 HTML. I zaktualizowaniu skrzypce z Bootstrap 3.0 znaczników HTML: http://jsfiddle.net/UWv9q/1/

<!-- Button trigger modal --> 
<a data-toggle="modal" href="#myModal" class="btn btn-lg btn-danger">Sign!</a> 

<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
     <h4 class="modal-title">Sign this petition!</h4> 
     </div> 
     <div class="modal-body"> 
     <p>Fields for the signatures here, take some from the facebook API</p> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Sign now!</button> 
     </div> 
    </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal -->

Źródło

2013-08-31 23:31:48

Problem jest, że ładujesz bootstrap 3, ale patrząc na dokumentacji w wersji 2.3.2. Zamów demo (snippet i result), które zrobiłem, działa dobrze, jeśli załadujesz bieżącą wersję.

Źródło

2013-08-31 23:34:26

Wybrałem pierwszą odpowiedź, ale po prostu pomyślałem, że będę wdzięczny! Chciałbym zagłosować, gdybym mógł. –

Miałem ten sam problem, ustawienie stałego z-index okna modalnego na najwyższy na stronie.

<style> 
.myModalWindow{ 
    z-index: 10;//or higher, depends on z-index of other elements on your page 
} 
</style>

Źródło

2016-01-22 16:18:29 Salty

Miałem podobny problem i udało mi się go rozwiązać, przenosząc modal na górę strony. Po wykonaniu tej czynności pojawiło się tło i okno modalne. Zajęło mi to około 4 godzin badań, aby to zrozumieć, więc mam nadzieję, że to pomoże komuś innemu!

Źródło

2016-11-15 15:35:50

Wszystkie powyższe odpowiedzi doprowadziły mnie do fałszywych celów.

Mój problem był taki, jak opisał OP, z tym że moim problemem był mój niechlujny CSS ukrywał/przestawiał modalny ekran.

Kliknąłem węzeł w przeglądarce elementów i wyłączyłem wszystkie reguły CSS, które pojawiły się na środku ekranu zgodnie z oczekiwaniami.

Źródło

2017-12-02 18:21:37 Leathan

Twitter Bootstrap Modal - Szare tło ale bez okna

Odpowiedz

Powiązane problemy