有条件地阻止“esc”上的 Bootstrap 4 模态关闭答案

【问题标题】：Conditionally prevent Bootstrap 4 modal closing on "esc"有条件地阻止“esc”上的 Bootstrap 4 模态关闭
【发布时间】：2018-01-18 15:24:25
【问题描述】：

我在第一次加载页面时使用会话存储来显示和隐藏模式。我不知道如何使用 cookie，所以我只使用会话存储。

在模式中，当您第一次关闭它时，我会更改标题和关闭按钮，然后可以作为“帮助模式”而不是“开始”访问。

如果会话存储未设置并且处于“开始”模式，我想阻止使用esc 关闭模式，但是当您关闭模式并将其作为“帮助模式”重新打开时启用esc 事件。

目前我让它工作在 50%，第一次你不能使用esc，但如果你将它作为“帮助”打开，你仍然不能使用esc，但是，如果你重新加载页面esc 它有效，

这是我的代码中的else 部分，在未设置会话存储时有效：

} else {
  // show the help modal
  $('#help').modal({
    keyboard: false
  });

  $('#help').modal('show');

  $('#help').on('hidden.bs.modal', function (e) {
    keyboard: true
  })
}

文档 (https://getbootstrap.com/docs/4.0/components/modal/#events) 表示.on('hidden.bs.modal' 事件在模态完成对用户隐藏时触发。

我必须使用哪个事件才能使其按我的意愿工作？

【问题讨论】：

伙计，与当前的 beta 3 版本相比，alpha 版本已经过时了......
对不起，我使用的是 beta 3 版本而不是 alpha，只是文档是 alpha
那么，你为什么要引用错误的文档呢？
这是您需要的链接：getbootstrap.com/docs/4.0/components/modal
对不起，我已经更新了正确的链接，文档是一样的，同样的事件

标签： javascript twitter-bootstrap bootstrap-4

【解决方案1】：

看起来，您不能简单地通过向其提供新的options 对象来重新配置已初始化的模式。这意味着如果您执行以下操作：

$('#help').modal({
    keyboard: false
});

$('#help').modal({
    keyboard: true
});

...比后一个语句没有任何效果。因此，为了克服这个问题，我建议销毁第一个模态——带有keyboard: false 的模态——并创建一个新的模态来监听键盘事件。

检查下面的工作 sn-p。
注意：第一个模式是在页面加载时使用keyboard: false 从代码中创建的，而按钮启动的连续模式设置为默认值，因此使用keyboard: true。

// } else {
    // show the help modal
    $('#help').modal({
        keyboard: false
    });

    // Note the `one` binding
    $('#help').one('hidden.bs.modal', function (event) {
        $('#help').modal('dispose');
    });
// }

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#help">
    Open Help
</button>


<div id="help" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">HELP</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>This is the Help modal</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

【讨论】：