モーダルボディはブートストラップモーダルには表示されません

ブートストラップモーダルを使用してdivでクリックしてモーダルを開こうとしています。モーダルボディはブートストラップモーダルには表示されません

私はdiv要素をクリック

は、画面がグレーアウトを取得しますが、モーダルボディは表示されません

コード：

<html> 
    <head> 
     <title></title> 
     <link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"></link> 
     <style> 
      #pageTitle { 
       display:none; 
      } 
     </style> 
    </head> 
<body> 
    <div class="col-lg-12 text-center"> 
     <h1>Policies</h1> 
    </div> 
    <div class="col-lg-12"> 
     <div class="container" id="tiles"> 
      <div class="col-lg-4" style="min-height:80px; background-color:ActiveCaption" id="tileTraffic"> 
       <div class="row"> 
        <div class="col-lg-8"> 
         <h3>Traffic Rules</h3> 
        </div> 
        <div class="col-lg-4"> 
         <h1>0</h1> 
        </div> 
       </div> 
      </div> 
      <div class="col-lg-4" style="min-height:80px; background-color:antiquewhite"> 
       <div class="row"> 
        <div class="col-lg-8"> 
         <h3>Food Policies</h3> 
        </div> 
        <div class="col-lg-4"> 
         <h1>0</h1> 
        </div> 
       </div> 
      </div> 
      <div class="col-lg-4" style="min-height:80px; background-color:cadetblue"> 
       <div class="row"> 
        <div class="col-lg-8"> 
         <h3>Medical Policies</h3> 
        </div> 
        <div class="col-lg-4"> 
         <h1>0</h1> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!-- Modal --> 
    <div id="myModalTraffic" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
     <div class="modal-body"> 
      <p>One fine body…</p> 
     </div> 
    </div> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script> 
    <script type="text/javascript"> 
     $("#tileTraffic").click(function() { 
      $('#myModalTraffic').modal('show'); 
     }); 
    </script> 
</body> 

</html>

CodePen：http://codepen.io/anon/pen/GNNNqb

出典

2016-11-17 Ubiquitous Developers

ブートストラップモーダルの構造なければなりませんDocsに従う、すなわち

<div class="modal fade" tabindex="-1" role="dialog"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-body"> 
     <p>modal body goes here...</p> 
     </div> 
    </div> 
    </div> 
</div>

あなたはhideクラスがモーダルに適用されています。あなたのモーダルが画面に表示されないようにするスタイルがdisplay: none !importantであるため、削除してください。

<div id="myModalTraffic" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
<div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-body"> 
      <p>One fine body…</p> 
     </div> 
</div> 
</div> 
    </div>

については

出典

2016-11-17 13:06:46

class = "モーダルフェード"はこれで十分ですか？ –

@ユビキタス開発者はい –

変更

<div id="myModalTraffic" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-body"> 
     <p>One fine body…</p> 
    </div> 
</div>

これら二つのdiv（.modal-ダイアログと.modal-コンテンツ）を追加すると、モーダルあなたからhideクラスを削除する問題に

出典

2016-11-17 13:08:08

を解決します、物事を実装する前にdocumentationとお読みください。モーダルの構造はドキュメントによるものではありません。このことができます

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
    <div class="col-lg-12 text-center"> 
 
     <h1>Policies</h1> 
 
    </div> 
 
    <div class="col-lg-12"> 
 
     <div class="container" id="tiles"> 
 
      <div class="col-lg-4" style="min-height:80px; background-color:ActiveCaption" id="tileTraffic" data-toggle="modal" data-target="#myModalTraffic"> 
 
       <div class="row"> 
 
        <div class="col-lg-8"> 
 
         <h3>Traffic Rules</h3> 
 
        </div> 
 
        <div class="col-lg-4"> 
 
         <h1>0</h1> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <div class="col-lg-4" style="min-height:80px; background-color:antiquewhite"> 
 
       <div class="row"> 
 
        <div class="col-lg-8"> 
 
         <h3>Food Policies</h3> 
 
        </div> 
 
        <div class="col-lg-4"> 
 
         <h1>0</h1> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <div class="col-lg-4" style="min-height:80px; background-color:cadetblue"> 
 
       <div class="row"> 
 
        <div class="col-lg-8"> 
 
         <h3>Medical Policies</h3> 
 
        </div> 
 
        <div class="col-lg-4"> 
 
         <h1>0</h1> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <!-- Modal --> 
 
    <div id="myModalTraffic" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
 
     <div class="modal-dialog"> 
 
     <div class="modal-content"> 
 
     <div class="modal-body"> 
 
      <p>One fine body…</p> 
 
     </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

希望：

<div id="myModalTraffic" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-body"> 
     <p>One fine body…</p> 
     </div> 
    </div> 
    </div> 
</div>

は、スニペットを見てください：

あなたのモーダルは次のように構造化されなければなりません！

出典

2016-11-17 13:10:12

モーダルボディはブートストラップモーダルには表示されません

答えて

関連する問題