Twitter Bootstrap Modal jest ciemny?

Cały mój kod bootstrap działa z wyjątkiem modala. Modal pokazuje, ale cały ekran jest ciemny. Oznacza to, że modal wydaje się być "za" szarością.Twitter Bootstrap Modal jest ciemny?

<link href="assets/css/bootstrap.css" rel="stylesheet"> 
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script src="assets/js/bootstrap.js"></script> 

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

    <div id="myModal" class="modal hide fade in" aria-hidden="true"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">X</button> 
      <h3 id="myModalLabel">Log in</h3> 
     </div> 
     <div class="modal-body"> 
     <p> 
      <form class="modal-form" id="loginform" > 
       <input type="text" name="username" placeholder="login" id="username"> 
       <input type="text" name="password" placeholder="password" id="userpassword"> 
      </form> 
      </p> 
     </div> 
     <div class="modal-footer"> 
      <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
      <button class="btn btn-success">Login</button> 
     </div> 
    </div>

Źródło

2012-12-31 user1935559

Naprawdę nie rozumiem problemu?

Właśnie wypróbowałem twój kod w jsfiddle: http://jsfiddle.net/zFHAJ/ i wszystko wydaje się działać dobrze?

<!DOCTYPE html> 
<html> 
    <head> 
     <link href="http://moi007.dyndns.org/igestis/theme/iabsis_v2//css/bootstrap.css?2.0-4" rel="stylesheet"> 
    <link href="http://moi007.dyndns.org/igestis/theme/iabsis_v2//css/bootstrap-responsive.css" rel="stylesheet"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script src="http://moi007.dyndns.org/igestis/theme/iabsis_v2//js/bootstrap.js?2.0-4"></script> 
    </head> 
    <body> 


    <div id="myModal" class="modal hide fade in" aria-hidden="true"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">X</button> 
      <h3 id="myModalLabel">Log in</h3> 
     </div> 
     <div class="modal-body"> 
      <form class="modal-form" id="loginform" > 
       <input type="text" name="username" placeholder="login" id="username"> 
       <input type="text" name="password" placeholder="password" id="userpassword"> 
      </form> 
     </div> 
     <div class="modal-footer"> 
      <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
      <button class="btn btn-success">Login</button> 
     </div> 
    </div> 

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

Może masz jakieś inne niestandardowe css, że konflikt bootstrap jeden?

Źródło

2012-12-31 08:35:40

Ponownie załadowano wszystkie bootstrap CSS i JS ... wydawało się naprawić problem. – user1935559

To też mi się przydarzyło. Przyczyną bycia modalnym nie było bezpośrednie dziecko "ciała", ale było ono dość głębokie w hierarchii. –

Dzięki, @PeterSankauskas, które mi pomogły. – jrhorn424

Wygląda na to trzeba dodać to do skryptu tuż przed </head>

<script type="text/javascript"> 
$(function() { 
    $("#myModal").modal({show:false}); 
}); 
</script>

Źródło

2013-01-07 09:18:21 LokiLust

umieścić bootstrap.js lub bootstrap.min.js przed

</body>

Źródło

2015-03-25 05:23:44 user2592890

Twitter Bootstrap Modal jest ciemny?

Odpowiedz

Powiązane problemy