2012-12-31 29 views
7

Tüm önyükleme kodlarım modal dışında çalışıyor. Modal gösterir, ancak tüm ekran karanlık. Yani, modal grinin "arkasında" gibi görünüyor.Twitter Bootstrap Modal karanlık mı?

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

cevap

3

Sorunu tam olarak anlamadım?

Kodunuzu jsfiddle: http://jsfiddle.net/zFHAJ/'da denedim ve her şey yolunda görünüyor mu?

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

Belki önyükleme birini çakışan diğer bazı özel css var?

+0

Tüm önyükleme CSS & JS ... sorunu giderildi görünüyordu. – user1935559

+6

Bu da benim başıma geldi. Modal olmanın nedeni, 'bedenin' doğrudan bir çocuğu değildi, fakat hiyerarşide oldukça derindi. –

+0

Teşekkürler, @PeterSankauskas, bu bana yardımcı oldu. – jrhorn424

5

Eğer

</body>
önce sağ </head>

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

yere önce komut bootstrap.js veya bootstrap.min.js bu eklemeniz gerekir gibi görünüyor