如何使用 Materialize.css 以编程方式关闭模态答案

【问题标题】：How to Programmatically Close a Modal with Materialize.css如何使用 Materialize.css 以编程方式关闭模态
【发布时间】：2018-03-22 17:42:29
【问题描述】：

我正在使用materialize.css 并且一直在尝试以编程方式关闭一个模式，然后立即打开另一个。

这是我目前用于open/close的代码：

$('.modal').modal('close', "#modal1");
$('.modal').modal('open', "#modal2");

实际发生的是，当我调用这些函数时，#modal1 成功关闭，但它的背景保持原样。

在同一时间，#modal2 打开，然后立即（大约 200 毫秒左右）关闭。同样，背景保持不变。

我可以寻求帮助来解决这个问题吗？

文档调用jQueryold。那么，我是否使用了一些不推荐使用的方法，我应该使用相同的原生 JavaScript 等效方法吗？什么，如果是的话？

【问题讨论】：

面临同样的问题？这个问题还有运气吗？
@JensO.AndersOlsén 我实际上已经解决了这个问题。但是，您使用的是哪个版本的 Materialise？

标签： html css modal-dialog materialize

【解决方案1】：

适用于 Materialize.js v0.100 及以上版本。

您可以调用 onClick 函数（）来关闭/打开多个模式，如下所示：

    <a href="#!" class="waves-effect waves-light btn" onclick="OpenCloseModal()">Button</a>

在下面的脚本中，这里执行 OpenCloseModal() 函数时，它首先关闭 Modal (#modal1)，然后打开 Modal (#modal2)

<script type="text/javascript">
    function closeOpenModal() {
       $('#modal1').modal('close');
       $('#modal2').modal('open');
    }
</script>

【讨论】：

【解决方案2】：

No-JQuery 方式。首先，您应该获得一个您打算关闭的模态实例。如果例如在初始化时你写：

var elems = document.querySelectorAll(".modal"); 
M.Modal.init(elems);

所以在elems 我们有所有模态的NodeList，例如我们有三个模态，关闭第二个你可以说：

elems[1].M_Modal.close();

打开第三个：

elems[2].M_Modal.open();

【讨论】：

【解决方案3】：

你可以试试：

$('#modal1').modal('close');

$('#modal2').modal('open');

【讨论】：

虽然我终于意识到我在使用100.0.2-alpha 并且指的是1.0.0 文档，并且已经使用了您的建议，但问题毕竟不是这个！
$("#modal_id").modal('open', {dismissible: true, complete: function() { console.log('Close modal'); } }) 用于关闭和打开putdismissible en false, 那是为了实现

【解决方案4】：

function close_modal() {
    var elem = document.getElementById("element-id");
    var instance = M.Modal.getInstance(elem);
    instance.close();
}

【讨论】：

$("#modal_id").modal('open', {dismissible: true, complete: function() { console.log('Close modal'); } }) 用于关闭和打开putdismissible en false, 那是为了实现