Модальное тело Не отображается в bootstrap modal

Я пытаюсь открыть modal по нажатию div, используя bootstrap modal.Модальное тело Не отображается в bootstrap modal

Когда я нажимаю на 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

Структура Bootstrap Модальные должна в соответствии с 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, заставляя ваш модальный не появляться на экране.

источник

2016-11-17 13:06:46

class = "modal fade" это достаточно? –

@ Удивительные разработчики да –

Изменить

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

Добавление этих двух дивы (.modal-диалог и .modal-контента) будет решать вопрос

источник

2016-11-17 13:08:08

Удалить hide класс от вас модальной, и, пожалуйста, прочитайте documentation перед тем, как приступить к реализации. Структура модальности не соответствует документации.

Вашего модальный должен быть структурирован как:

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

Взгляните на фрагменте кода:

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

Надеется, что это помогает!

источник

2016-11-17 13:10:12

Модальное тело Не отображается в bootstrap modal

ответ

Смежные вопросы