Реализация модального окна Twitter Bootstrap

Я новичок в программировании, так что прошу прощения за мою неопытность.

В настоящее время я работаю над созданием веб-сайта и хочу иметь модальные кнопки. Кажется, я не могу заставить его работать, и я экспериментировал с ним, по крайней мере, несколько часов. Вот что я написал в своем html-файле, взятом с сайта Twitter Bootstrap:

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

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

Я что-то упустил здесь? Мне нужно добавить что-то еще? Сайт начальной загрузки сказал «вызвать модальный через javascript», но я не знал, куда поместить $('#myModal').modal(options). Я поместил его в файл .html И файл .js, но ни одна из попыток не сработала.

В файле .html уже есть

<script src="js/bootstrap-modal.js"></script>

вместе со всеми другими плагинами, но это, похоже, ничего не делает. Также стоит отметить, что я работаю локально на своем компьютере.

Я уверен, что это очень простой вопрос, но ЛЮБАЯ помощь будет принята с благодарностью.

EDIT: мне удалось заставить его работать. Похоже, моя проблема заключалась в том, что я искал bootstrap-modal.js, хотя на самом деле у меня был только bootstrap.js. Я создал новый файл с кодом boostrap-modal.js, и он работал нормально.

Тем не менее, я все еще не могу добиться плавного перехода. Я использовал файлы bootstrap-transition.js, но до сих пор не могу их отключить. Дополнительная помощь будет принята с благодарностью.


twitter-bootstrap twitter
person Patrick E.    schedule 22.03.2012    source источник
comment
возможный дубликат Не удается заставить работать простой модальный режим начальной загрузки   -  person Jim G.    schedule 12.08.2013

Ответы (1)


arrow_upward
17
arrow_downward

* Обновлен путь таблицы стилей начальной загрузки на скрипке, он изменился с тех пор, как я написал этот ответ.

Вам нужно включить скрипт jQuery перед файлом скрипта bootstrap-modal.js, чтобы плагин работал, вот скрипт прямо из CDN Google, который вы можете свободно включить на свою страницу, просто не забудьте включить его до< /strong> любой js, который у вас может быть:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Вам нужно только вызвать скрипт, если вы хотите, чтобы он отображался при загрузке вашей страницы, в противном случае вам просто нужно иметь правильный атрибут data-* и ссылку href в вашей модальной кнопке, которая у вас уже есть:

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

Вы можете включить все скрипты в конец вашего тега <body> для более быстрой загрузки контента, так же, как это есть на демонстрационной странице начальной загрузки Twitter.

Вот демонстрация модальной страницы:

http://jsfiddle.net/3v2zg/626/

person Andres Ilich    schedule 22.03.2012
comment
Спасибо, что нашли время ответить на мой вопрос, я очень ценю это. Я взял сценарий, который вы предоставили, и поместил его перед всеми остальными в конце тела, как вы сказали, но он все равно не работал. Что происходит, когда я использую код, который я предоставил выше, так это то, что при загрузке страницы модальное окно уже открыто (без нажатия кнопки) и не отвечает на нажатие кнопки «Закрыть», «Сохранить изменения» или «x». Когда я использую предоставленный вами код, модальное окно просто не открывается. Может я что-то еще упускаю? - person Patrick E.; 22.03.2012
comment
@ПатрикЭ. Приведенный выше код должен работать нормально, при условии, что все файлы сценариев правильно загружены в ваш документ. Поскольку модальное окно вызывается атрибутом данных в вашей ссылке на запуск, вам действительно не нужно предоставлять вызов js для модального окна, которое предоставляется только в том случае, если вы хотите загрузить модальное окно при загрузке вашего контента (например, автоматически). Вам также не хватает класса .hide внутри вашего модального контейнера, это то, что скрывает модальный режим до вызова, поэтому добавьте его, например. <div class="modal hide fade" id="myModal"> - person Andres Ilich; 22.03.2012
comment
Большое спасибо! Это работает, и я очень счастлив, потому что на моем сайте много модальных окон. Я новичок в кодировании, но я решил, что просто НАЧНУ кодировать веб-сайт, даже если он плохой, и я научусь этому по ходу дела. Я считаю, что это лучше, потому что изучение кода ДО создания сайта может показаться довольно сложной задачей. В любом случае, похоже, проблема была в файлах скриптов. В настоящее время у меня проблемы с переходом (с использованием файла bootstrap-transition.js). Переходные затухания были бы действительно хорошим плюсом. Есть предположения? Нужно ли мне снова добавлять скрипт ajax jquery, который вы предоставили ранее? - person Patrick E.; 22.03.2012
comment
Без загруженного сценария jQuery модальный сценарий не будет работать, поэтому убедитесь, что включен один экземпляр сценария. Файл transition.js используется для добавления эффектов в сценарии начальной загрузки, без него у вас не будет никаких эффектов на вашей странице, он в основном использует CSS3 для реализации большинства эффектов, поэтому убедитесь, что вы тестируете обновленный браузер. Чтобы включить эффект в ваше модальное окно, обязательно включите класс .fade в его контейнер, например так: <div class="modal hide fade" id="myModal"> обратите внимание на класс затухания, который существует по той же причине, для эффекта затухания. - person Andres Ilich; 22.03.2012
comment
Наконец-то заработало! Благодаря тонну! Вы были так полезны, и я волновался, что никто не ответит на мой вопрос, учитывая, что этот сайт был моим последним средством! Спасибо, - person Patrick E.; 22.03.2012