2015-09-24 2 views
2

Как я могу показать ботстрап-мода в Метеор?Show/hide modal in Meteor

От http://meteorpedia.com/read/Modals Я могу прочитать, что Meteor-way должен использовать логику шаблона, чтобы показать/скрыть модальный.

Я попытался добавить модальность в моем шаблоне с

<div class="modal fade"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
      <span aria-hidden="true">&times;</span> 
      <span class="sr-only">Close</span> 
     </button> 
     <h4 class="modal-title">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     <p>One fine body&hellip;</p> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 

и у меня есть переменная showModal, которая определяет, является ли модальный должен быть показан или нет. Но я не знаю, как программно показывать/скрывать модальные.

ответ

4

Добавить идентификатор в модальный

<div id="myModal" class="modal fade"> 

И использовать modal(), чтобы открыть модальный

$('#myModal').modal('show'); 

Чтобы закрыть модального

$('#myModal').modal('hide'); 

Docs


Если вы хотите, чтобы открыть модальное в Метеоре путь

В JS

Session.set('showModal', true); // Show modal 
Session.set('showModal', false); // Hide modal 

В шаблоне

{{#if showModal}} 
    <div class="modal fade"> <!-- Use Display block to show the modal by default --> 
    ... 

{{/if}} 
+0

, но из ссылки, которую я опубликовал, говорится, что это способ jquery, а не способ Метеор. – Jamgreen

+0

@Jamgreen Meteor way означает просто сохранение переменной в 'Session' и использование переменной для отображения/скрытия модального. – Tushar

1

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

+1

Я сам использую [mizzao: bootboxjs] (https://atmospherejs.com/mizzao/bootboxjs). Handy-денди. –

+0

@ MichelFloyd, это тоже очень хорошо. – Nate