Bootstrap modal не появляется в Meteor

Question

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

Вот код, у меня есть:

<div class="container"> 
    <h2>Example of creating Modals with Twitter Bootstrap</h2> 
    <div class="modal hide fade in" id="example" style="display: none; "> 
     <div class="modal-header"> 
      <a class="close" data-dismiss="modal">×</a> 
      <h3>This is a Modal Heading</h3> 
     </div> 
     <div class="modal-body"> 
      <h4>Text in a modal</h4> 
      <p>You can add some text here.</p> 
     </div> 
     <div class="modal-footer"> 
      <a class="btn btn-success" href="#">Call to action</a> 
      <a class="btn" data-dismiss="modal" href="#">Close</a> 
     </div> 
    </div> 
    <p><a data-toggle="modal" href="#example" class="btn btn-primary btn-large">Launch 
     demo modal</a></p> 
</div> 

Я по существу полученный код из: http://www.w3resource.com/twitter-bootstrap/modals-tutorial.php для целей тестирования.

Answer 1

У меня возникла такая же проблема. Я удалил класс «hide» из модального, и после этого он работал. Мне также пришлось включить модальный шаблон в тот же шаблон со ссылкой, которая активирует его.

Вместо

<div class="modal hide fade in" id="example" style="display: none; "> 

Попробуйте

<div class="modal fade" id="example" style="display: none;"> 

Answer 2

У меня была аналогичная проблема. Проблема заключается в принципиальном различии в работе Meteor и Bootstrap. Метеор предполагает, что разметку можно перезагрузить в любое время. Если какие-либо живые переменные изменяются, Meteor просто перезагружает шаблон. Bootstrap, с другой стороны, предполагает, что шаблон будет загружен только один раз, и они будут изменены с помощью javascript во время выполнения.

Что происходит, метеорит загружает мой модальный шаблон. В какой-то момент я нажимаю на что-то, что вызывает появление модальности в javascript. Тем не менее, через секунду после этого изменяется переменная live, которая заставляет шаблон загружаться снова. Поскольку шаблон имеет скрытый режим, он переопределяет javascript, который просто пытался показать шаблон.

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

До:

<template name="modal">  
    <div class="modal hide fade in" id="settings-modal" data-backdrop="false"> 
    <div class="modal-header"> 
    ... 
</template> 

После:

<template name="modal">  
    <div class="modal hide fade in" id="settings-modal" data-backdrop="false"> 
    {{> modalInner}} 
    </div> 
</template>  

<template name="modalInner"> 
    <div class="modal-header"> 
    ... 
</template> 

Answer 3

Я понял, достойное решение - мой модальное это собственный шаблон и сессию переменная управляет, если он будет отображаться. После того, как он «вынесен», я запускаю JS бутстрапа, чтобы «открыть» его.

... 
{{#if getSession 'isRegisterConfirmation'}} 
    {{> registerConfirm}} 
{{/if}} 
</template> 

<template name="registerConfirm"> 
<div class="modal registerConfirmModal"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
    <h3>Confirm Name/Info</h3> 
    </div> 
    <div class="modal-body"> 
    You are registering as 
    ... 

Сложная часть связывает события между Метеор и Бутстрап.

• На Метеоре визуализация -> триггер Bootstrap Модальный показать
• На Bootstrap Модальной шкурой -> Очистить переменный сеанс из Метеора

Это на самом деле работает очень хорошо, вот упрощенная версия того, что я ве получил происходит ...

Template.registerConfirm.rendered = function() { 
    var thing = Session.get('thingToConfirm'); 
    $('.registerConfirmModal').on('hidden', function() { 
    Session.set('thingToConfirm', ''); 
    Session.set('isRegisterConfirmation', false); 
    }); 
    $('.registerConfirmModal').on('shown', function() { 
    $('.registerConfirmModal button.confirm').focus(); 
    }); 
    $('.registerConfirmModal').modal('show'); 
}; 

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

Answer 4

Вот пример приложение, которое показывает, как отобразить самозагрузки модальность с Метеор:

• https://github.com/alanning/meteor-modal-example

Вы можете увидеть живую версию в действии здесь:

• http://modal-example.meteor.com/