Laravel Blade中模态框（Modal）无法显示的可能原因排查

问题描述 #

在Laravel Blade文件中创建了两个模态框按钮及对应模态框，点击按钮后模态框无法正常显示，删除其中一个按钮后问题仍未解决。相关代码如下：

<td class="table-danger"><button id="aaaBtn" class="soldbtn btn-warning" data-toggle="modal" data-target="#soldModal{{$data->id}}">SOLD</button></td>

<td class="table-warning"><button id="bbbBtn" class="updatebtn btn-success" data-toggle="modal" data-target="#updateModal{{$data->id}}" >UPDATE</button></td>

<!-- Modal -->                   
<div class="modal fade" id="updateModal{{$data->id}}" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel{{$data->id}}" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
  <div class="modal-header">
        <img src="assets/images/rice.png">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
<div class="col-lg-12">
    <div class="contact-form">
        <form id="contact" action="{{url('/reservation')}}" method="post" enctype="multipart/form-data">
            @csrf
            <div class="row">
            <div class="col-lg-12 col-sm-12" align="center">
            <h3>{{$data->title}}</h3>
            <img height="200" width="200" src="productimage/{{$data->image}}">
            <h5 class='m-2'>~ KILOS ~</h5>
            </div>


    </div>
    <div class="row col-12">
    @foreach($modal_data as $modal_data)
    <div class="row sm-6 ml-4 mb-1" class="no-gutters" style="height:25px; width: auto;">
        <p class='text-dark mr-2'><input type="checkbox" name="prod_kilos[]" value="{{$modal_data->kg}}" id="checkitem" class="check-cls"/> {{$modal_data->kg}}kg </p>
        <p class='text-dark'>Qty:</p><input style="width:80px; height:25px;" type="number" name="prod_qty[{{$modal_data->kg}}]" min="1" value="1" max="{{$modal_data->warehouse_qty}}" class="form-control ml-2">
        <input type="hidden" name="product_name[{{$modal_data->kg}}]" value="{{$modal_data->title}}">
        <input type="hidden" name="product_fee[{{$modal_data->kg}}]" value="{{$modal_data->price}}">
        <input type="hidden" name="prod_id[{{$modal_data->kg}}]" value="{{$modal_data->id}}">
    </div>
    @endforeach 
    </div>
    <div class=" col-lg-12 mt-5">
        <button name="submit" type="submit" id="form-submit"  class="submit-btn" >ADD TO CART</button>
    </div>
  </form>
</div>
</div>
<script>
</div>
</div>
</div>
<!-- End Modal -->

可能的原因及解决方法 #

• Bootstrap依赖未正确引入：模态框功能依赖Bootstrap的CSS、JS文件，若使用Bootstrap 3/4版本还需依赖jQuery。检查页面是否按顺序加载了这些资源：先加载jQuery，再加载Bootstrap JS，确保资源路径正确且无加载失败。
• HTML结构语法错误：代码中存在未闭合的<script>标签（<script></div>），这会破坏DOM结构，导致模态框无法被正确解析。直接删除这个多余的<script>标签即可。
• 元素属性重复定义：模态框内的<div class="row sm-6 ml-4 mb-1" class="no-gutters">重复定义了class属性，属于无效HTML，需合并为：<div class="row sm-6 ml-4 mb-1 no-gutters">。
• 模态框层级结构错误：Bootstrap模态框要求严格的层级结构：.modal → .modal-dialog → .modal-content → .modal-header/.modal-body/.modal-footer。当前代码将col-lg-12直接放在.modal-content下，缺少.modal-body容器，需将表单内容包裹进.modal-body中。
• 模态框ID不匹配：检查按钮data-target中的ID是否与对应模态框的id完全一致，比如代码中只展示了updateModal的模态框，需确认soldModal对应的模态框是否正确定义且ID匹配。

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