Bootstrap模式不会出现在流星

我试图让Bootsrap的模式工作，但是当我点击按钮时，我所得到的只是一个黑色屏幕，没有模式对话框出现，就像我期望的那样。我正在使用流星。Bootstrap模式不会出现在流星

这里是我的代码：

<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用于测试目的。

来源

2013-03-02 kpatelio

我创造用bootstrap编辑了一个空白流星项目，上面的代码工作正常。你有没有其他的js插件？你是如何在meteor bootstrap包中加入bootstrap的？ – Akshat 2013-03-02 16:15:24

嗯，我创建了一个空白项目，它也在工作。我有包文件夹中包含的标准js插件。我也有一些其他的js插件，但它们并没有真正与bootstrap相关。我只是做流星bootstrap添加。 – kpatelio 2013-03-02 16:52:04

也许有一些冲突？ jQuery是默认包含，所以你不必添加它，如果你有流星加入他们，你也并不需要他们在你的插件文件夹中。你具体有哪些？您可以尝试一次删除一个，以查找何时开始工作？ – Akshat 2013-03-02 16:58:35

我遇到了同样的问题。我从模式中删除了'隐藏'类，并在此之后工作。 我还必须将模式包含在激活它的链接的相同模板中。

而不是

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

试试这个

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

来源

2013-05-04 20:09:58

我有一个类似的问题。问题是Meteor和Bootstrap如何工作的根本区别。流星假设标记可以随时重新加载。如果任何实时变量发生变化，Meteor只会重新加载模板。另一方面，Bootstrap假定模板只会加载一次，并且在运行时用JavaScript修改。

发生了什么是流星正在加载我的模态模板。在某个时候，我点击了一些东西，这会导致该模式出现在javascript中。然而，稍后的一秒，一个活动变量会导致模板再次加载。由于该模板隐藏了模式，因此它会覆盖刚刚尝试显示模板的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>

来源

2013-06-02 05:27:00 vish

还要注意的是，为了处理关闭模式，你需要把事件处理程序上外模板，而不是内部。 – vish 2013-06-02 20:09:38

谢谢！轻松解决了我自己的相关问题，我感谢您以有用的方式解决了更大的问题。 – Ben 2013-07-27 19:31:49

我已经找到了一个体面的解决方案 - 我的模态是它自己的模板和会话变量控制，如果它得到显示。 “渲染”后，我触发引导程序的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 
    ...

棘手的部分是在Meteor和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'); 
};

然后触发模式是会话变量设置为true，那么简单....交换的所有其他基于事件。

来源

2013-08-20 03:57:06 zeroasterisk

下面是一个例子应用程序，它展示了如何显示与流星的引导模式：