无法让模态在 Meteor 应用程序上工作答案

【问题标题】：Cant get modal to work on Meteor app无法让模态在 Meteor 应用程序上工作
【发布时间】：2015-05-11 14:21:16
【问题描述】：

美好的一天，我目前正在尝试做一些非常简单的事情，让在 Meteor 中单击按钮时出现模式窗口。

所以我在名为 Sessions 的 lib 文件夹中创建了一个 JS 文件，我在其中编写了这段代码

if (Meteor.isClient){
Session.setDefault('showAhorroGen',false);}

这首先允许我将 Session 默认设置为 false，当我单击它时，它将变为 true 并显示对话框。

然后在我的客户端文件夹中，我创建了一个事件以在单击按钮时听到，并创建了一个返回会话的助手。

 Template.menu.events({
        'click .ahorro': function(event,tmpl){
            Session.set('showAhorroGen',true)

        }
});


Template.products.helpers({
    showAhorroGen : function(){
    return Session.get('showAhorroGen');
}})

在我的 HTML 中，我添加了以下代码，如果会话 showAhorroGen 为 true，则使用模态渲染模板。

<h3> Cálcula tu ahorro gratis  <button type='button' class='btn  btn-danger ahorro'>Aquí</button></h3>
    </div>
    {{#if showAhorroGen}}
        {{> ahorroGen}}
    {{/if}}

最后是模板，出于测试原因，只是引导模式示例

<template name='ahorroGen'>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
     <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
     </div>
    </div>
    </div>
</template>

为什么模态窗口不出现？

【问题讨论】：

在阅读了您的问题两次后，我仍然不知道您的问题是什么。确实，出了什么问题？模态不显示？乍一看，您的代码似乎很好。
模式没有出现。那么，我的问题是，为什么模式没有出现？
请相应地编辑您的问题。
此修改是否符合相应的问题？
是的，非常完美。感谢您的编辑。

标签： javascript html twitter-bootstrap meteor

【解决方案1】：

问题在于，现在您已经编写了动态插入模态 HTML 代码的代码，但在 Bootstrap 中，您需要激活模态以显示它，例如通过执行以下 JavaScript 代码：@987654321 @。

编辑

最简单的解决方法是添加以下 JavaScript 代码：

Template.ahorroGen.onRendered(function(){
   $("#myModal").modal()
})

【讨论】：

好的，您能详细说明一下吗？没听懂？

【解决方案2】：

您的事件和帮助程序定义似乎使用了错误的模板。

您目前在您的活动中定位“菜单”模板，并为助手定位“产品”模板。这些都应该针对相同的模板。

【讨论】：

我更改了目标，但仍然无法正常工作。模态窗口没有出现。