我有一个laravel blade管理面板和一个推荐列表，可以在屏幕上呈现在我的表中。在表的“我的操作”列中，我有一个删除图标。首先，点击它我打开了一个确认对话框，在删除之前确认工作正常。它看起来不吸引人，所以我添加了一个模态代替。所以我想要的是
- 单击删除模式时应打开。
- 询问要删除或取消的用户
- 如果用户单击，则仅删除特定证明。
问题是我的模态打开好，但它不断 Flink 在屏幕上，我不能点击它。没有控制台错误或网络错误。是什么原因造成的，如何解决？
@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
2条答案
按热度按时间z4iuyo4d1#
我检查了你的代码，并提供了链接，找到了flikring的原因。请在下面查看并运行codepen。
关于Flickring
**没有 Flink **
原因tr/li中模态的位置..它是由后面的深色覆盖物引起的。
解决方案
在li标签或表格之外制作模态代码，您可以将其保存在单独的div中。您可以在表外重复for-each循环，并为每个按钮创建具有唯一id的模态。（不推荐）
建议
我个人更喜欢做一个单一的模态代码，并将其放置在body标记之前。然后我使用java脚本来programmatically显示模态并根据需要进行操作。
hs1ihplo2#
这将适用于刀片用户，但我们运行两个循环，虽然不是嵌套的，但不确定它是否对大量数据有效。如果有人可以改进或提高这一点，请继续：
PS：代码已经简化