Question

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

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

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

实际发生的情况是，当我调用这些函数时，#modal1成功关闭，但其背景仍然存在。

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

我能帮忙解决这个问题吗？

文档调用jQuery 旧。那么，我是否使用了一些depreacated方法，我应该使用相同的vanilla JavaScript等价物吗？什么，如果是的话？

Answer 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>

Answer 2

无jQuery的方式。首先，您应该获得要关闭的模态实例。如果例如在初始化时您写：

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

因此在elems中，我们具有所有模态的 NodeList ，例如，我们具有三个模态，要关闭第二个模态，您可以说：

elems[1].M_Modal.close();

打开第三个：

elems[2].M_Modal.open();

Answer 3

您可以尝试：

git clone ssh://git@github.com/Myorg/repo2.git Cloning into 'repo2'... Permission denied (publickey). fatal: Could not read from remote repository.

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

Answer 4

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

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

4 个答案: