Реализация Twitter Bootstrap Modal - программирование

Я новичок в кодировании, поэтому, пожалуйста, извините мою неопытность.

В настоящее время я работаю над созданием веб-сайта и хочу иметь кнопки-модалы. Я не могу заставить его работать и экспериментировать с ним, по крайней мере, несколько часов. Это то, что я написал в моем 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, но по-прежнему не могу понять, как это сделать. Дополнительная помощь будет принята с благодарностью.

Ответ 1

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

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

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

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

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

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

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

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