Bootstrap Модальный не работает

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

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

источник

2011-12-23 kirby

<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 является идентификатором всплывающего окна

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

источник

2011-12-24 11:06:41

Я думаю, что вам не нужен div класса modal-backdrop. Он добавлен javascript bootstrap при показе модального. –

Возможно ли, что вы можете расширить этот ответ, чтобы показать, как можно подключить кнопки Первичный и Вторичный, чтобы на самом деле что-то сделать. Скажем, первичный должен открыть страницу «foo.html», а вторичная должна открывать страницу «bar.html» –

Я не эксперт, но я думаю, что мы можем использовать href для ссылки «foo.html» или любой файл resp или также можем использовать javascript или функцию jquery, чтобы получить эту работу. –

Кроме того, убедитесь, что вы включили правила 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); 
}

источник

2012-05-03 15:06:02 Luis

Bootstrap Модальный не работает

ответ

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