Laravel Blade循环中删除确认模态框闪烁无法点击问题排查

我用Laravel Blade搭建了后台管理面板，在表格里展示客户评价列表，操作列设置了删除图标。原本点击图标会弹出确认对话框，为了美观改成了模态框，需求如下：

• 点击删除按钮时打开确认模态框
• 询问用户是否确认删除或取消操作
• 用户点击删除时仅删除指定的客户评价

现在遇到的问题是：模态框能正常打开，但会持续闪烁，无法点击操作，控制台和网络都没有报错信息。请问这个问题的成因是什么，怎么解决？

代码如下：

@extends('backend.layouts.master')
@section('content')
<div class="layout-px-spacing">
    <div class="row layout-spacing">
        <div class="col-lg-12">
            <div class="statbox widget box box-shadow">
                <div class="widget-header">
                    <div class="row">
                        <div class="col-xl-6 col-md-6 col-sm-6 col-6">
                            <h4>All Testimonial</h4>
                        </div>
                        @if($flash=session('message'))
                        <div class="col-xl-6 col-md-6 col-sm-6 col-6">
                            <div class="alert alert-success mt-2" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x close" data-dismiss="alert">
                                        <line x1="18" y1="6" x2="6" y2="18"></line>
                                        <line x1="6" y1="6" x2="18" y2="18"></line>
                                    </svg></button> <strong>Success!</strong> {{$flash}} </div>
                        </div>
                        @elseif($flash=session('error'))
                        <div class="col-xl-6 col-md-6 col-sm-6 col-6">
                            <div class="alert alert-danger mt-2" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x close" data-dismiss="alert">
                                        <line x1="18" y1="6" x2="6" y2="18"></line>
                                        <line x1="6" y1="6" x2="18" y2="18"></line>
                                    </svg></button>{{$flash}}</div>

                        </div>
                        @endif
                    </div>
                </div>
                <div class="widget-content widget-content-area">
                    <div class="table-responsive mb-4">
                        <table id="style-3" class="table style-3  table-hover">
                            <thead>
                                <tr>
                                    <th class="checkbox-column text-center"> ID </th>
                                    <th class="text-center">Client Name</th>
                                    <th class="text-center">Company</th>
                                    <th class="text-center">Testimonial</th>
                                    <th class="text-center">Date</th>
                                    <th class="text-center dt-no-sorting">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($testimonials as $testimonial)
                                <tr>
                                    <td class="checkbox-column text-center"> {{$testimonial->id}} </td>
                                    <td class="text-center">{{$testimonial->client_name}}</td>
                                    <td class="text-center">{{$testimonial->testimonial_subtitle}}</td>
                                    <td class="text-center">{{$testimonial->testimonial}}</td>
                                    <td class="text-center">{{$testimonial->created_at}}</td>
                                    <td class="text-center">
                                        <ul class="table-controls">
                                            <li><a href="{{ route('admin.testimonial.edit', $testimonial->id) }}" class="bs-tooltip" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit"><svg style="color:blue;" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-2 p-1 br-6 mb-1">
                                                        <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path>
                                                    </svg></a></li>
                                            <li>
                                                <button  data-toggle="modal" data-target="#myModal{{$testimonial->id}}">
                                                    <svg style="color: red;" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash p-1 br-6 mb-1">
                                                        <polyline points="3 6 5 6 21 6"></polyline>
                                                        <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                                                    </svg>
                                                </button>
                                                <!-- The Modal -->
                                      <div class="modal" id="myModal{{$testimonial->id}}">
                                        <div class="modal-dialog">
                                          <div class="modal-content">

                                            <!-- Modal Header -->
                                            <div class="modal-header">
                                              <h4 class="modal-title">Confirmation</h4>
                                              <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                            </div>

                                            <!-- Modal body -->
                                            <div class="modal-body">
                                            u sure?
                                            </div>
                                            <!-- Modal footer -->
                                            <div class="modal-footer">
                                                <form method="post" action="{{ route('admin.testimonial.destroy', $testimonial->id) }}">
                                                    @csrf
                                                    {{ method_field('DELETE')}}
                                                <button class="btn btn-danger">
                                                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash-fill" viewBox="0 0 16 16">
                                                    <path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"/>
                                                    </svg>
                                                    Delete
                                                </button>
                                              </form>
                                            </div>

                                          </div>
                                        </div>
                                      </div> 
                                            </li>
                                        </ul>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

1. Bootstrap版本属性混用：删除按钮使用了旧版Bootstrap的data-toggle="modal"、data-target属性，但模态框关闭按钮用了新版的data-bs-dismiss="modal"属性，新旧版本JS事件逻辑冲突，导致模态框渲染异常出现闪烁。
2. 模态框布局位置错误：每个模态框嵌套在表格的<li>元素内，属于表格行的一部分，表格的hover样式、滚动或重绘行为会触发模态框重复渲染，加剧闪烁问题。

步骤1：统一Bootstrap版本属性 #

根据你使用的Bootstrap版本，统一模态框相关属性：

• 若用Bootstrap 4及以下：将关闭按钮的data-bs-dismiss="modal"改为data-dismiss="modal"
• 若用Bootstrap 5+：将删除按钮的data-toggle="modal"改为data-bs-toggle="modal"，data-target改为data-bs-target

示例（Bootstrap 5版本修改删除按钮）：

<button data-bs-toggle="modal" data-bs-target="#myModal{{$testimonial->id}}">
    <svg style="color: red;" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash p-1 br-6 mb-1">
        <polyline points="3 6 5 6 21 6"></polyline>
        <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
    </svg>
</button>

步骤2：将模态框移出表格行 #

把所有模态框代码从表格的<li>中抽离，放到页面最底部（@endsection之前），避免表格布局行为影响模态框渲染：

@extends('backend.layouts.master')
@section('content')
<div class="layout-px-spacing">
    <div class="row layout-spacing">
        <div class="col-lg-12">
            <div class="statbox widget box box-shadow">
                <!-- 保留原有的头部、表格代码，仅移除每个tr内的模态框 -->
                <div class="widget-header">
                    <!-- 原头部代码不变 -->
                </div>
                <div class="widget-content widget-content-area">
                    <div class="table-responsive mb-4">
                        <table id="style-3" class="table style-3  table-hover">
                            <thead>
                                <!-- 原表头代码不变 -->
                            </thead>
                            <tbody>
                                @foreach($testimonials as $testimonial)
                                <tr>
                                    <!-- 原表格列代码不变 -->
                                    <td class="text-center">
                                        <ul class="table-controls">
                                            <li><!-- 原编辑按钮代码不变 --></li>
                                            <li>
                                                <!-- 修改后的删除按钮 -->
                                                <button data-bs-toggle="modal" data-bs-target="#myModal{{$testimonial->id}}">
                                                    <svg style="color: red;" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash p-1 br-6 mb-1">
                                                        <polyline points="3 6 5 6 21 6"></polyline>
                                                        <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                                                    </svg>
                                                </button>
                                            </li>
                                        </ul>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 所有模态框统一放在页面底部 -->
@foreach($testimonials as $testimonial)
<div class="modal" id="myModal{{$testimonial->id}}">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">确认删除</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                确定要删除这条客户评价吗？
            </div>
            <div class="modal-footer">
                <form method="post" action="{{ route('admin.testimonial.destroy', $testimonial->id) }}">
                    @csrf
                    {{ method_field('DELETE')}}
                    <button class="btn btn-danger">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash-fill" viewBox="0 0 16 16">
                            <path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"/>
                        </svg>
                        删除
                    </button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endforeach
@endsection

步骤3：验证效果 #

修改后刷新页面，点击删除按钮，模态框将正常显示，不再闪烁，且可正常执行删除或取消操作。

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