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 に答える