使用Materialize.css编程切换模态框遇异常问题求助

嗨，这个问题我之前在项目里也碰到过，核心原因是没注意到Materialize的模态框关闭操作是异步带动画的！

为什么会出现这种情况？ #

Materialize的modal('close')不是瞬间完成的——它要执行关闭动画、处理遮罩层的显示/隐藏、重置DOM状态这些操作，整个过程是异步的。你现在直接连续调用关闭和打开，相当于在第一个模态框还没彻底“收拾好”的时候就强行打开第二个，这会打乱它内部的状态管理，就出现了遮罩残留、第二个模态框自动关闭的问题。

正确的解决办法 #

用Materialize模态框close方法提供的完成回调函数，等第一个模态框完全关闭（包括动画结束、遮罩处理完成）之后，再打开第二个模态框。代码这么写就没问题了：

// 精准操作单个模态框，避免批量操作的状态冲突
$('#modal1').modal('close', {
  complete: function() {
    // 等#modal1彻底关闭后，再打开#modal2
    $('#modal2').modal('open');
  }
});

额外的小提示 #

• 尽量别用$('.modal')这种批量选择器操作模态框，针对具体ID操作更精准，能减少不必要的状态冲突
• 如果你的项目里自定义了模态框动画时长，记得在初始化模态框时配置duration参数，这样回调的时机才会准确：

  // 初始化时自定义动画时长（默认是200ms）
  $('#modal1').modal({ duration: 300 });
  $('#modal2').modal({ duration: 300 });
  

内容的提问来源于stack exchange，提问作者Mrigank Pawagi