Реализация Twitter Bootstrap Modal - PullRequest
13 голосов
/ 22 марта 2012

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

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

Файл .html уже содержит

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

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

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

РЕДАКТИРОВАТЬ : Мне удалось заставить его работать.Похоже, моя проблема была в том, что я использовал bootstrap-modal.js, хотя на самом деле у меня был только bootstrap.jsЯ сделал новый файл с именем boostrap-modal.js с кодом, и он работал нормально.

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

1 Ответ

17 голосов
/ 22 марта 2012

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

Вам необходимо включить сценарий jQuery перед файлом сценария bootstrap-modal.js дляплагин для работы, вот скрипт прямо из CDN googles, который вы можете свободно включать на своей странице, просто убедитесь, что он включен до любых 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> для более быстрой загрузки контента, так же, как и на демо-странице начальной загрузки twitters.

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...