Начальная загрузка Twitter: модальное исчезновение

Question

У меня проблема с модальностью начальной загрузки в твиттере ...

Это прекрасно работает, когда у меня нет элемента .fade на моем элементе.Как только я добавляю его, модал не появляется.

Я отследил проблему до этой строки, я думаю:

doAnimate ?
  this.$backdrop.one(transitionEnd, callback) :
  callback()

doAnimate - это webkitTransitionEnd, этовыглядит хорошо.Но я думаю, что transitionEnd никогда не запускается, потому что я пытаюсь что-то зарегистрировать в обратном вызове, и он никогда не регистрируется.

Есть идеи?

---

РЕДАКТИРОВАТЬ: какой-то код

Ссылка:

<a href="/events/2-fefewfewfe/rsvps" data-backdrop="true" data-controls-modal="event-modal" data-keyboard="true">I'm attending!<span class="ico join"></span></a>

Модал (работает без класса исчезновения, когда я его добавляю)

<div id="event-modal" class="modal hide fade"></div>

CSS:

.modal.fade {
    -webkit-transition: opacity .3s linear, top .3s ease-out;
    -moz-transition: opacity .3s linear, top .3s ease-out;
    -ms-transition: opacity .3s linear, top .3s ease-out;
    -o-transition: opacity .3s linear, top .3s ease-out;
    transition: opacity .3s linear, top .3s ease-out;
    top: -25%;
}

Я что-то упустил?

---

Спасибо.

Answer 1

Несмотря на то, что он был принят, информация в этом ответе была неверной, поэтому я удалил исходный ответ, чтобы избежать путаницы.Вот jsFiddle рабочей демонстрации с fade http://jsfiddle.net/sfWBT/880/

, отредактированный для предоставления обновленной ссылки, так как предыдущий jsFiddle не работал, и я больше не могу добавлять jsFiddle без кода.Так вот и код:

html:

<div id="event-modal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <a class="close" href="#">x</a>
        <h3>Modal Heading</h3>
      </div>
      <div class="modal-body">
        <p>Some information</p>
      </div>
      <div class="modal-footer">
        <a class="btn primary" href="#">Primary</a>
        <a class="btn secondary" href="#">Secondary</a>
      </div>
    </div>
  </div>
</div>

js:

$(function() {
  $('#event-modal').modal({
    backdrop: true
  });
});

Answer 2

У меня была такая же проблема.Я пытался использовать bootstrap в существующем проекте, и поскольку многие имена классов конфликтовали с моими собственными именами классов, я перекомпилировал bootstrap.css с пространством имен .tbs.В плагине модального окна элемент background добавлен в document.body.Так как модальный фон не был в моем пространстве имен .tbs, селектор css fade не применялся.Таким образом, переход никогда не происходил и, следовательно, функция обратного вызова никогда не выполнялась.Я исправил это, изменив

this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />').appendTo(document.body)

на

this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />').appendTo($('.tbs')[0])

Answer 3

попробуйте следующее jquery в одном из ваших js-файлов, вам понадобится классифицированный элемент 'close' внутри вас. Modeal / alert

для ящиков предупреждения

$(".alert .close").click( function() {
     $(this).parent().addClass("fade");
});

или для модальных (может отличаться в зависимости от вложенности вашего элемента)

$(".modal .modal-header .close").click( function() {
   $(this).parent().parent().addClass("fade");
});

Answer 4

У меня была та же проблема, что и я хотел использовать только части платформы начальной загрузки Twitter.

Это стили CSS, которые отсутствуют в вашем случае Робин. Для корректной работы модалов необходимо включить правила из файла component-animations.less.

это позволит модалам работать с добавленным к ним классом .fade.

Answer 5

Проблема для меня была такой же, как у @sleepysamurai, в том, что я поместил пространство имен в файл начальной загрузки, и это нарушает модальность.Я исправил это, изменив .css, а не .js, поскольку он уже был «настроен».В частности (для Bootstrap 2.3.2, пространство имен в bootstrap-container):

• Поиск / замена всех .bootstrap-container .modal- и замена на .modal-.
• Поиск / замена всех .bootstrap-container .fade и замените на .fade.

Другими словами, устранение пробелов в модальных правилах и правила затухания устранили проблему.

Answer 6

Вы должны использовать плагин, который вызывает модальное поведение, это плагин jQuery из Twitter. Для ссылки на этот скрипт: http://twitter.github.com/bootstrap/javascript.html#modal

Также убедитесь, что вы используете правильный фрагмент HTML (он не отображается на странице). Исходя из исходного кода этой ссылки:

<div class="modal hide fade" id="modal-from-dom">
    <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>
</div>

Обратите внимание, что класс "in", который предлагает @ChristianVarga, добавляется модальным плагином автоматически. Вы должны только инициализировать плагин, как указано в документации.