Бутстрап Модал не работает - PullRequest
Новая
       21

Бутстрап Модал не работает

3 голосов
/ 23 декабря 2011

У меня есть простая кнопка, которая использует модальный бутстрап, который похож на всплывающий div. Я не могу заставить его работать. Когда я нажимаю кнопку, ничего не происходит. Я использую Firefox. Я, наверное, забываю что-то простое, но не могу найти проблему. 

        <!DOCTYPE html>
        <html>
          <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type='text/javascript' src='http://twitter.github.com/bootstrap/1.4.0/bootstrap-modal.js'></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">

     </head>
     <body>

      <a class="btn" data-controls-modal="my-modal" data-backdrop="static" id='mod'>Launch Modal</a>

     </body>
   </html>

Ответы [ 2 ]

6 голосов
/ 03 мая 2012

Кроме того, убедитесь, что вы включили правила CSS для стилизации фона.Например: 

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000000;
}

.modal-backdrop.fade {
  opacity: 0;
}

.modal-backdrop, .modal-backdrop.fade.in {
  opacity: 0.8;
  filter: alpha(opacity=80);
}
4 голосов
/ 24 декабря 2011 
  <div class="modal-backdrop fade in"  ></div>
  <div class="modal hide fade in" id="my-modal" style="display: none;">
    <div class="modal-header">
        <a class="close" href="#">×</a>
        <h3>Modal Heading</h3>
    </div>
    <div class="modal-body">
       <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <a class="btn primary" href="#">Primary</a>
        <a class="btn secondary" href="#">Secondary</a>
    </div>

Вы должны поместить этот код в тело страницы, которое является HTML-кодом всплывающего окна (модальное).Меньше файлов, используемых для этого кода, это patterns.less.а my-modal - это идентификатор всплывающего окна

Надеюсь, это работает для вас.

...