8

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

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

4 回答 4

5

看来您需要在 </head> 之前将其添加到脚本中

<script type="text/javascript">
 $(function () { 
    $("#myModal").modal({show:false});
});  
</script>
于 2013-01-07T09:18:21.410 回答
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？

于 2012-12-31T08:35:40.917 回答
0

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

</body>

于 2015-03-25T05:23:44.613 回答
0 
.modal-backdrop {
  display: none;
}

.modal {
  background: rgba(0,0,0,0.5);
}
于 2020-09-08T11:18:41.240 回答