如何重新打开Bootstrap模态意外关闭

Question

我在一个页面上有几个不同的模态框，它们都可以正常工作，但是如果用户在模态框的表单字段上进行了一些输入，然后不小心在模态框外单击（关闭它），他们放弃了更改，因为如果用户单击他们按下的相同按钮以打开模式，他们输入的数据将被从数据库中提取的数据覆盖。

所以我想为 "reopen last closed modal" 提供一个函数，它可以简单地再次显示模态框上次使用的状态 - 以及其中的任何数据。

本质上类似于意外关闭模态框的 Ctrl-Z。

知道模态框的ID就很简单了。如：

$('#myModal1').modal('show'); });

但是因为我在一个页面上有几个不同的模式可用，而且我不想有一堆 "restore" 按钮，所以我需要能够检测到最后关闭的模式的 ID。

如果没有更简单的方法，我可以在每次关闭模式时捕获 ID，然后在需要重新打开模式而不更改其数据时使用该 ID。像这样：

$('#myModal1').on('hidden.bs.modal', function (e) {
  var LastModal = '#myModal1';
})

$('#myModal2').on('hidden.bs.modal', function (e) {
  var LastModal = '#myModal2';
})

function reOpen() {
$(LastModal).modal('show');
}

但我猜有一种方法更简单，不需要我在 JS/jQuery 中声明所有模态 ID。有什么想法吗？

Answer 1

我做了一些调整，现在对我来说效果很好，除了我的脚本文件中的几行短代码外，基本上没有其他麻烦。

var LastModal;
$('.modal').on('hidden.bs.modal', (e) => {LastModal = $(e.target).attr('id'); })
function reOpen() { $('#'+LastModal).modal('show');}

只需为您的模态框使用 class "modal" 样式，并调用 "reOpen"，只需使用类似：

<span onclick='reOpen();'>Reopen</span>

感谢@marekful 的建议！

也，如果你想通过按Ctrl+Z访问这个（或任何其他功能），你可以添加：

// press Ctrl+Z to restore modal
$(document).keydown(function(evt){
    if (evt.keyCode==90 && (evt.ctrlKey)){
        evt.preventDefault();
        reOpen();
    }
});

如何重新打开Bootstrap模态意外关闭

How to re-open Bootstrap modal accidentally closed

javascript

twitter-bootstrap

modal-dialog

window

restore