Laravel中Materialize Modal异常：默认显示且点击无响应求助

我之前也踩过Materialize Modal的坑，给你几个实用的排查和修复方向：

1. 先修复HTML里的重复属性错误 #

你的触发按钮里写了两次href="#modal1"，这会导致浏览器解析异常，直接影响Modal的触发逻辑：

<!-- 错误写法 -->
<a href="#modal1" class="btn waves-effect waves-light green right modal-trigger" href="#modal1"> Create</a>

<!-- 正确写法 -->
@if($auth >= 5) 
  <a href="#modal1" class="btn waves-effect waves-light green right modal-trigger"> Create</a> 
@endif

2. 确认依赖加载顺序（关键！） #

Materialize完全依赖jQuery，所以加载顺序绝对不能乱：先加载jQuery，再加载Materialize的JS文件，CSS可以放在<head>里。在你的skeleton.blade.php里要确保顺序是这样的：

<!-- 在<head>中加载Materialize CSS -->
<link rel="stylesheet" href="{{ asset('css/materialize.min.css') }}">

<!-- 在</body>之前加载JS，顺序不能颠倒 -->
<script src="{{ asset('js/jquery.min.js') }}"></script>
<script src="{{ asset('js/materialize.min.js') }}"></script>

如果顺序搞反或者jQuery没加载成功，控制台会直接报错，Modal肯定没法正常工作。

3. 调整Modal初始化代码的位置 #

推荐把初始化代码放在单个blade文件的scripts区块里（通过skeleton的@yield('scripts')加载），这样能确保Modal的DOM元素已经渲染完成后再执行初始化：

<!-- 你的单个blade文件底部 -->
@section('scripts')
<script>
  // 两种初始化方式任选其一都可以
  // jQuery方式
  $(document).ready(function() {
    $('.modal').modal();
  });

  // 原生JS方式（有时候兼容性更好）
  // document.addEventListener('DOMContentLoaded', function() {
  //   const modalElems = document.querySelectorAll('.modal');
  //   M.Modal.init(modalElems);
  // });
</script>
@endsection

如果非要放在skeleton底部，必须确保初始化代码在@yield('content')之后，也就是所有页面内容渲染完成后再执行。

4. 解决Modal自动显示的问题 #

Modal自动显示通常是因为CSS没正确加载，或者默认样式被自定义代码覆盖。你可以：

• 打开浏览器开发者工具（F12），查看Modal元素的display属性，正常应该是none，如果是block，检查有没有自定义样式覆盖了Materialize的默认样式。
• 初始化时可以强制设置隐藏参数：

  $('.modal').modal({
    dismissible: true,
    // 确保初始化时Modal处于隐藏状态
    onOpenStart: function() {
      this.el.style.display = 'none';
    }
  });
  

5. 检查控制台错误 #

打开浏览器控制台（F12 → Console标签），看看有没有$ is not defined或者M is not defined这类错误，这些都是依赖没加载成功的信号，先解决这些基础错误再测试Modal。

按照上面的步骤一步步排查，应该就能解决你的问题了！

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