使 Bootstrap 不可关闭模态再次可关闭

Question

我使用此代码使 Bootstrap 3.4.1 模态不可关闭 - 不允许用户在模态外部单击或使用 Esc 关闭它，同时仍然允许正常的

.modal("hide")

和

data-dismiss="modal"

工作：

$('#myModal').removeData('bs.modal')
    .modal({
        backdrop: 'static',
        keyboard: false
    });

这是来自对答案的评论：Disallow Twitter Bootstrap modal window from opening

但是，我正在努力扭转上述情况。仅仅传递相反的选项是行不通的；模式仍然不可关闭：

$("#myModal").modal({
    backdrop: true,
    keyboard: true
});

在 SO JavaScript 聊天的帮助下（感谢 @matt），我还尝试使用

hide.bs.modal

处理程序，其中我会读取其中的

data-allow-close

属性以确定是否应该允许通过键盘/鼠标关闭：

attachNonClosableModalHideHandler: function() {
    const $self = $(this);
    $("#myModal").on("hide.bs.modal", $self.handleNonClosableModalHide);
},

handleNonClosableModalHide: function () {
    return $(this).data("allow-close");
}

这是模态的主要 DIV 标签：

<div id="myModal" class="modal default fade" tabindex="-1" 
     role="dialog" data-allow-close="true">...</div>

但是，上述处理程序会阻止对

$("#myModal").modal("hide")

的调用工作，因为我现在需要在执行此操作之前设置

allow-close

数据属性。此外，出于同样的原因，模式中的

data-dismiss="modal"

按钮也不起作用。

我创建了这个 jQuery 插件来调用作为隐藏模式的包装器，但这一切都变得很麻烦：

$.fn.hideNonClosableModal = function () {
    const $self = $(this);
    const hasClass = $self.hasClass("modal");
    const hasRole = $self.attr("role") === "dialog";
    if (!hasClass || !hasRole) {
        return this;
    }

    $self.data("allow-close", true);
    $self.modal("hide");

    return this;
};

使模式再次可关闭不应该这么困难。我究竟做错了什么？谢谢。

Answer 1

有经验的我会使用事件并取消它们。

$('#myModal').on('hide.bs.modal', function(e) {
  if (!confirm("am i closable?")) {
    e.preventDefault()
  }
})

body {
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <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>