2014-09-24 5 views
1

Я пытаюсь использовать Bootstrap modal как всплывающее окно, которое запускает событие прокрутки jQuery. Событие прокрутки работает следующим образом:Может ли Bootstrap Modal использоваться без кнопки? (событие прокрутки jQuery)

jQuery(document).ready(function() { 
    jQuery('.Potato').css('top', jQuery('.Potato').closest('.post').height() + 'px'); 
    jQuery('#id-focus-comment').on('click', function(e) { 
     jQuery('#comment').focus(); 
    }); 
    jQuery('.Potato').hide(); 
    jQuery(window).on('scroll', function(e) { 
     if((jQuery('#reports').offset().top+jQuery('#reports').height()) < jQuery(window).height() + jQuery(window).scrollTop()) { 
      jQuery('.Potato').show(); 
     } 
    }); 
}); 

Сценарий захватывает ДИВ скрывает/показывает «» картофельные «», когда пользователь прокрутил прошел раздел "Отчеты" «».

Другой часть моего сценария динамически добавляет в модальном наряду с пользовательским контентом:

<div class="question"> 
    <div class="modal fade"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal"> 
      <span aria-hidden="true">&times;</span> 
      <span class="sr-only">Close</span> 
      </button> 
      <h4 class="modal-title">Potato Counter</h4> 
     </div> 
     <div class="modal-body"> 
      <p>' + e.data.title + '</p> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Но когда он на самом деле все триггера на сайте, это не выглядит как загрузочный Modal:

http://i.stack.imgur.com/MnqKT.png

Я полагаю, что мне не хватает чего-то очевидного? Моя консоль dev не показывает никаких ошибок при загрузке любых ресурсов, и я вижу файлы bootstrap css и js. Не хватает ли какого-либо требуемого вызова/элемента, который не запускается из-за отсутствия кнопки? (Из того, что я понимаю, как правило, как они используются?)

+0

Забыли модальный класс, посмотрите на структуру HTML, HTTP://getbootstrap.com/javascript/#modals. Кроме того, когда модальный режим запускается, класс тела также изменяется на модально-открытый – Christina

+0

Спасибо - добавлено в модальное затухание. Ошибка новичков! Не слишком уверенно, что вы имеете в виду во второй части, но меняя класс тела на модально-открытый; как я могу это сделать? – RichG

+0

Это тело.modal-open происходит, когда модаль запускается, если вы запускаете его каким-либо другим способом, и хотите, чтобы у него был темный фон и способ его поведения, вам придется добавить этот класс при загрузке и удалить он - если он автоматически не удаляется. – Christina

ответ

2

Да, можно использовать bootstrap modal без кнопки.

Пожалуйста, прочитайте о документации здесь: http://getbootstrap.com/javascript/#modals-usage

Основе текущую HTML можно вызвать модально с помощью:

jQuery('.question .modal').modal('show'); 
Смежные вопросы