Bootstrap模态框在Meteor中无法显示

Question

Bootstrap模态框在Meteor中无法显示

8

我想要让Bootstrap的模态框起作用，但是当我点击按钮时，我得到的只是一个黑屏，没有出现我期望的模态对话框。我正在使用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获取了代码，用于测试目的。

- lbj-ub

嗯，我创建了一个空项目，它也可以工作。我在packages文件夹中包含了标准的js插件。我还有一些其他的js插件，但它们与bootstrap没有真正的关系。我只是执行了meteor bootstrap add命令。 - lbj-ub

也许有一些冲突？JQuery默认已包含，因此您无需添加它，如果您在Meteor中添加了它们，则也不需要在插件文件夹中添加它们。你具体使用了哪些？可以尝试逐个删除来找到何时开始工作的。 - Tarang

你可以尝试移除 "hide" 类或者 "display: none" 样式中的一个。我认为你不需要同时使用它们两个。 - Kiv

1

你的模态框是否包含在<template></template>中？我在这种情况下也遇到了同样的问题。每当调用模态框的元素嵌套在template标签内时，我都会得到一个空白屏幕。如果有解决方法那将非常有用。 - Mercutionario

你有一个我们可以克隆的 Git URL 吗？ - jagill

显示剩余2条评论

4个回答

4

以下是展示如何在Meteor中显示Bootstrap模态框的示例应用：

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

你可以在此处查看实时版本：

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

- alanning

2

我已经想出了一个不错的解决方案——我的模态框是自己的模板，一个会话变量控制它是否显示。在它被“渲染”之后，我触发了Bootstrap的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之间处理事件。

在Meteor渲染时 -> 触发Bootstrap模态框的显示
在Bootstrap模态框隐藏时 -> 清除Meteor中的会话变量

这实际上非常有效，以下是我正在进行的简化版本...

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....其余所有的交互都基于事件。

- zeroasterisk

0

我曾经遇到过同样的问题。我从模态框中删除了“hide”类，然后它就可以正常工作了。我还必须在与激活它的链接相同的模板中包含该模态框。

而不是

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

试试这个

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

- user1000952

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- vish · Accepted Answer

我遇到了类似的问题。问题在于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>