2

Я пытаюсь открыть модальное с помощью фрагмента

<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css">
<script src="/static/bootstrap/js/bootstrap-modal.js"></script>

<script type="text/javascript" src="/static/bootstrap/js/bootstrap.js"></script>

<div class="modal hide" id="myModal">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
</div>
<div class="modal-body">
    <p>One fine body…</p>
</div>
<div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
</div>

</div>

<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>

скопированного из документации. При нажатии на кнопку происходит переход по ссылке #myModal в отличии от документации, где появляется модульное окно. Почему? Заранее спасибо.

1
  • 1
    ...ну для таких же начинающих баранов как я добавлю: подключение jQuery должно происходить перед плагином Bootstrap...
    – wowkalucky
    25 янв 2013 в 8:15

2 ответа 2

3

Не работал с Bootstrap, но поверхностный "осмотр пациента" показал, что для работы модальных окон, необходимо подключить плагин bootstrap-modal.js и стили. Стили разбирать, честно говоря, облом. Поэтому сами просмотрите какие классы и id-шники нужны для работы из файла стилей на демонстрационной странице, а остальное удалите. В итоге, даже не особо разгребая коды, получаем нужный нам результат.

1
  1. Вы забыли подключить jQuery (о его необходимости написано в документации к компонентам бутстрапа)
  2. Вы забыли инициализировать окошко и привязать событие.

    $('[data-toggle=model]').modal()
    
1
  • 3
    во втором пункте нет необходимости, если соблюдён data-api: data-toggle='modal' data-target='modalId'
    – Spectre
    11 авг 2012 в 10:18

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.