Twitter Bootstrap Modal 是黑暗的？答案

【问题标题】：Twitter Bootstrap Modal is dark?Twitter Bootstrap Modal 是黑暗的？
【发布时间】：2012-12-15 11:28:04
【问题描述】：

我所有的引导代码都在工作，除了模式。模态显示，但整个屏幕是黑暗的。也就是说，模态似乎在灰色“后面”。

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

【问题讨论】：

标签： javascript html twitter-bootstrap

【解决方案1】：

看起来你需要在脚本之前添加这个

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

【讨论】：

【解决方案2】：

我不是很明白这个问题？

我刚刚在 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 ？

【讨论】：

重新加载所有引导 CSS 和 JS...似乎解决了问题。
这也发生在我身上。模态的原因不是body 的直接子代，而是在层次结构中相当深。
谢谢@PeterSankauskas，这对我有帮助。
哇！谢谢。我很高兴有人在我之前遇到了这个问题。
感谢@PeterSankauskas！真有帮助，我差点没救了

【解决方案3】：

将 bootstrap.js 或 bootstrap.min.js 放在前面

&lt;/body&gt;

【讨论】：

【解决方案4】：

.modal-backdrop {
  display: none;
}

.modal {
  background: rgba(0,0,0,0.5);
}

【讨论】：