Twitter bootstrap 引导模式不'；不出现在流星中

我试图让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>

使用Twitter引导创建模态的示例

---

我基本上是从以下位置获得代码的：出于测试目的。

我遇到了同样的问题。我从modal中删除了“hide”类，之后它就开始工作了我还必须在同一个模板中包含激活该模式的链接。

而不是

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

试试这个

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

---

我也有类似的问题。问题是Meteor和Bootstrap工作方式的根本区别。Meteor假设可以随时重新加载标记。如果任何活动变量发生变化，Meteor只需重新加载模板。另一方面，Bootstrap假设模板只加载一次，并在运行时使用javascript对其进行修改

现在发生的是meteor正在加载我的模式模板。在某个点上，我点击了一些东西，这导致该模式出现在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>

{{>modalInner}}
...

我找到了一个不错的解决方案——我的模式是它自己的模板，如果它被显示，则由会话变量控制。在它被“渲染”之后，我触发引导程序的JS来“打开”它

---

然后，触发模式就像将会话变量设置为true一样简单。。。。交换的其余部分都基于事件。

下面是一个示例应用程序，它演示了如何使用Meteor显示引导模式：

您可以在此处看到正在运行的实时版本：

---

我用引导创建了一个空白的meteor项目，上面的代码运行良好。你还有其他的js插件吗？你是如何添加引导的？它和meteor引导包一起吗？嗯，我创建了一个空白项目，它也在工作。我在packages文件夹中包含了标准的js插件。我也有一些其他的js插件，但它们实际上与引导无关。我刚做了流星引导添加。可能有一些冲突？JQuery在默认情况下包括在内，所以您不必添加它，如果您使用meteor添加它们，那么您也不需要将它们放在插件文件夹中。你有什么特别的？您是否可以尝试一次删除一个来查找它何时开始工作？您是否使用源代码中的整个HTML？您的控制台是否有错误？您的模式是否包含在

中？在那个特定的案例中，我也有同样的问题。每当调用模态的元素嵌套在

template

标记中时，我就会看到一个空白屏幕。对此进行修复将非常有用。还要注意，为了处理关闭模式，您需要将事件处理程序放在外部模板上，而不是内部模板上。谢谢！轻松解决了我自己的相关问题，我感谢您以有用的方式解决了更大的问题。

...
{{#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
    ...

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');
};