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

Question

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

所以我想要一个“重新打开上次关闭的模式”的功能，它只是在它最后使用的状态下再次显示模式 - 里面有任何数据。

基本上就像 Ctrl-Z 用于意外关闭模式。

如果您知道模态框的 ID，那真的很简单。如：

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

但是因为我在一个页面上有几个不同的模态可用，而且我不想有一堆“恢复”按钮，所以我需要能够检测到最后一个关闭的模态的 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');} 

只需为您的模态使用样式类“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();
    }
});