Question

美好的一天，我目前正在尝试做一些非常简单的事情，只需点击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 为真，则使用模式呈现模板。

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

最后模板，出于测试原因只是bootstrap模态示例

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

为什么模态窗口没有出现？

Answer 1

看起来您的目标是错误的模板与您的事件和帮助程序定义。

您目前正在定位活动中的“菜单”模板，以及帮助程序的“产品”模板。这些应该都是针对同一个模板。

无法使用模态在Meteor应用程序上工作

1 个答案: