如何重新打开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();
    }
});