Bootstrap模态未出现在Meteor中 [英] Bootstrap modal doesn't appear in Meteor

问题描述

我正在尝试使Bootsrap的模态正常工作，但是当我单击按钮时，我得到的只是一个黑屏，没有模态对话框出现，正如我期望的那样.我正在使用流星.

I'm trying to get Bootsrap's modal to work but when I click on the button all I get is a black screen, no modal dialog box appears as I expect it to. I'm using meteor.

这是我的代码:

<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 用于测试.

I've essentially obtained the code from: http://www.w3resource.com/twitter-bootstrap/modals-tutorial.php for testing purposes.

推荐答案

我遇到了类似的问题.问题是Meteor和Bootstrap的工作方式存在根本差异.流星认为标记可以随时重新加载.如果任何活动变量发生变化，Meteor只会重新加载模板.另一方面，Bootstrap假定模板将仅加载一次，并且在运行时使用javascript对其进行了修改.

I had a similar issue. The problem is a fundamental difference in how Meteor and Bootstrap work. Meteor assumes that markup can be reloaded at any time. If any live variables change, Meteor just reloads the template. Bootstrap on the other hand assumes that the template will only be loaded once, and them modified with javascript at runtime.

正在发生的是流星正在加载我的模态模板.在某些时候，我正在单击某些内容，这将导致该模式出现在javascript中.但是，稍后，实时变量发生变化，这导致模板再次加载.由于模板具有隐藏的模式，因此它会覆盖试图显示模板的javascript.

What is happening is meteor is loading my modal template. At some point I'm clicking on something, which causes that modal to appear in javascript. However, a split second later, a live variable changes which causes the template to load again. Since the template has the modal hidden, it overrides the javascript that was just trying to show the template.

我通过将模态的内部放置在与外部不同的模板中解决了这个问题.外部模板不响应任何活动变量，因此希望永远不会重新加载它.

I solved this by putting the inside of the modal in a different template than the outside. The outer template doesn't respond to any live variables, so it will hopefully never be reloaded.

之前:

<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>

这篇关于Bootstrap模态未出现在Meteor中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！