为什么我的下一个 modal.show() 并不总是有效？答案

【问题标题】：Why doesn't my next modal.show() not always work?为什么我的下一个 modal.show() 并不总是有效？
【发布时间】：2018-03-02 15:37:23
【问题描述】：

我的 Template.PageName.helper Meteor.callPromise() 中有两个 Bootstrap Modal，我想按特定顺序启动它们。顺序为：modal.hide('loadingPageAnimation')，后跟modal.show('c2bNotifications')。

默认情况下，modal.hide('loadingPageAnimation')在页面Router.route('/page')被modal.show('loadingPageAnimation')激活

这成功显示了modal.show(loadingPageAnimation)，而（在我的助手中）我的Meteor.CallPromise() 正在等待结果：

../client/main

Meteor.callPromise('c2b').then(
  function(results) {

    //### When results comes through, Modal.hide('loadingPageAnimation') 
    Modal.hide('loadingPageAnimation');

    //### then Modal.show('c2bNotifications' along with results message)
    Modal.show('c2bNotifications', {msg: results};

  }).catch( function(error) {
    alert("Error!");
  }
);

这里的问题是，当Meteor.callPromise('c2b')返回结果时，Modal.hide('newLoadingModal');被成功隐藏，但Modal.show('c2bNotifications', {msg: results});只显示有时有时不显示。我希望Modal.show('c2bNotifications', {msg: results}); 始终显示/工作保持一致。谁能解释为什么会发生这种情况，并可能提供更好的编码解决方案，从而强制显示Modal.show('c2bNotifications', {msg: results});？

在我的模板文件下方查找。

../client/main.html

<template name="c2bNotifications">
  <div class="modal fade makeAnOffer">
    <div class="modal-dialog modal-sm">
      <div class="modal-content modal_MakeAnOffer">

        <div class="modal-header">
          <h4 class="modal-title">Notification </h4>
        </div>

        <div class="modal-body">
          <div id = approvedMsg > {{msg}} </div> 
        </div>

        <div class="modal-footer c2bNotifications">
          <button type="button" class="btn btn-primary btn-lg" id="paymentNotificationClose" data-dismiss="modal">Close</button>
        </div>

      </div>
    </div>
  </div>
</template>

期待您的帮助

【问题讨论】：

你应该使用$("#modal").modal("show")' OR $("#modal").modal("hide")`
你可以使用：$('#modal').modal({show:false});初始化模态框，然后使用 $('#modal').modal('toggle');显示/隐藏它
@PankajMakwana 我正在使用 Meteor 框架，所以 `Modal.show('c2bNotifications', {msg: results};` 中的 c2bNotifications 实际上是它自己的模板，而不是id 元素。很抱歉，我的问题并不清楚
@VinhNT 我正在使用 Meteor 框架，所以 `Modal.show('c2bNotifications', {msg: results};` 中的 c2bNotifications 实际上是它自己的模板，而不是id 元素。很抱歉，我的问题并不清楚
显示你的模板文件

标签： javascript jquery twitter-bootstrap meteor

【解决方案1】：

第一个解决方案：您可以做的是添加一点超时，让第一个模态有时间被隐藏。然后调用 Modal.show()。

{
    Modal.hide('loadingPageAnimation');

    setTimeout(function(){
        Modal.show('c2bNotifications');
    }, 1000);
}

问题是您需要等待第一个模态隐藏，因为没有参数可以使用peppelg:bootstrap-3-modal 包向 Modal.hide() 函数添加回调。如果上面的代码真的不行，可以添加这段代码

Modal.allowMultiple = true;

第二种解决方案：我看到您正在使用第一个模式来显示加载标志，也许您可以将此标志添加到 c2bNotifications 中，并使用这样的助手显示它：

<template name="c2bNotifications">

<div class="modal fade makeAnOffer">
    <div class="modal-dialog modal-sm">
        <div class="modal-content modal_MakeAnOffer">

            <div class="modal-header">
                <h4 class="modal-title">Notification </h4>
            </div>
            {{#if isLoaded}}
            <div class="modal-body">
                <div id = approvedMsg > {{msg}} </div> 
            </div>

            <div class="modal-footer c2bNotifications">
                <button type="button" class="btn btn-primary btn-lg" id="paymentNotificationClose" data-dismiss="modal">Close</button>
            </div>
            {{else}}
               <!-- insert loading page animation -->
            {{/if}}
        </div>
    </div>
</div>
</template>

你的帮助代码应该是这样的：

Template.c2bNotifications.helpers({
    isLoaded(){
        // return true if your Meteor.callPromise succeed, otherwise false
    },
});

第三种解决方案： 您可以尝试创建一个自制的回调，可能通过检查 DOM 中是否存在模态。

【讨论】：