Question

我有一个使用nemo64:bootstrap包的Meteor应用程序，其中包含以下配置：

{"modules": {
    "normalize":            true,
    "print":                true,

    "scaffolding":          true,
    "type":                 true,
    "code":                 false,
    "grid":                 true,
    "tables":               true,
    "forms":                true,
    "buttons":              true,

    "glyphicons":           true,
    "button-groups":        true,
    "input-groups":         true,
    "navs":                 true,
    "navbar":               true,
    "breadcrumbs":          false,
    "pagination":           false,
    "pager":                false,
    "labels":               true,
    "badges":               true,
    "jumbotron":            false,
    "thumbnails":           false,
    "alerts":               true,
    "progress-bars":        true,
    "media":                false,
    "list-group":           false,
    "panels":               true,
    "wells":                false,
    "close":                true,

    "component-animations": true,
    "dropdowns":            true,
    "modals":               true,
    "tooltip":              true,
    "popovers":             true,
    "carousel":             true,

    "affix":                true,
    "alert":                true,
    "button":               true,
    "collapse":             true,
    "scrollspy":            true,
    "tab":                  true,
    "transition":           true,

    "utilities":            true,
    "responsive-utilities": true
}}

在我的一个页面中，我有一个模态，要求用户确认用户删除：

<div class="modal fade confirmRemoveUserModal confirmRemoveUserModal_{{this._id}}" tabindex="-1" role="dialog" aria-labelledby="confirmRemoveUserModalLabel" 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="confirmRemoveUserModalLabel">Confirm User Removal</h4>
      </div>
      <div class="modal-body">
        Are you sure you want to remove {{this.username}} permenently?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">No/Cancel</button>
        <button type="button" class="btn btn-danger btnConfirmRemoveUser">Yes!</button>
      </div>
    </div>
  </div>
</div>

这是从按钮触发的。弹出模式时，背景为灰色（预期）并关闭背景滚动（也是预期的）。但是在我通过JavaScript关闭模态之后，页面被“卡住”在它所在的位置，并且滚动被破坏。即使我离开那个页面（我在这里松散地使用了页面，它实际上从未移出“页面”，因为它是一个流星路径）而且回来了，卡住的页面仍然停留在同一个位置。如果我通过No/Cancel按钮上的数据属性解雇，那么一切正常。

以下是处理确认的代码：

'click .btnConfirmRemoveUser': function(event, tmpl) {
  tmpl.$('.confirmRemoveUserModal').modal('hide');
  var username = this.username;
  Meteor.call('removeUser', this._id, function(err, result) {
    if (err) {
      createDismissibleAlert('An error occurred trying to remove the user ' + username + ': ' + err, 'danger', $('#adminAlerts'));
    } else {
      createDismissibleAlert('User ' + username + ' was removed.', 'success', $('#adminAlerts'));
    }
  });
}

我已经观察了Chrome的开发工具中的行为，我可以看到modal-open类在模态打开时应用了body元素，并在取消时被删除，但是当它被上述JavaScript解雇时仍然存在。我有谷歌周围看看是否有人遇到同样的问题，但到目前为止没有。我有一种感觉，因为我的页面上有相同模态的多个副本。

Bootstrap Modal关闭滚动，但在解除时不会将其重新打开

0 个答案: