2012-12-31 56 views
7

我的所有引导代码都在工作,除了模式。 Modal显示,但整个屏幕是黑暗的。也就是说,模态似乎在灰色“背后”。Twitter Bootstrap莫代尔是黑暗的?

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

回答

3

我不是真的明白这个问题吗?

我刚刚在jsfiddle中尝试了你的代码:http://jsfiddle.net/zFHAJ/并且一切似乎都正常工作?

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

也许你有冲突的自举一个其他自定义CSS?

+0

重装上阵所有引导CSS和JS ......似乎来解决这个问题。 – user1935559

+6

这也发生在我身上。成为模式的原因不是“身体”的直接子代,而是在层次结构中相当深刻。 –

+0

谢谢,@PeterSankauskas,帮助我。 – jrhorn424

5

它看起来像你需要前

</body>
的</HEAD>

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

发生之前有权将其添加到脚本bootstrap.js或bootstrap.min.js