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();
    }
});

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

1 个答案: