【发布时间】：2020-01-09 06:19:44
【问题描述】：
我想为每个项目打开一个删除确认模式窗口。 我正在使用 laravel 5.8 和纯 javascript。
我成功打开了一个modal，但是我需要一个一个动态的删除一个item。
例如 有3个类别。 1.Vue je 2.反应js 3.Angular js
我想一一删除。 因此模态框需要获取每个 ID。
这是我的代码。 index.html
<div class="content">
<table class="table">
<thead>
<th>Category</th>
</thead>
<tbody>
@foreach($categories as $category)
<tr>
<td>
{{ $category->name }} <br>
</td>
<td>
<a href="{{ route('categories.edit', $category->id) }}"><button btn="" class="edit-btn">Edit</button></a><br>
</td>
<td>
<button class="modalBtn" >Delete</button><br>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
class="modalBtn" 触发模态。
app.js
const openModal = document.querySelectorAll('.modalBtn');
const closeModal = document.getElementsByClassName('closeBtn')[0];
const modal = document.getElementById('simpleModal');
openModal.forEach(function(e) {
e.addEventListener('click', open);
})
closeModal.addEventListener('click', close);
window.addEventListener('click', closeOutside);
function open() {
modal.style.display = 'block';
}
function close() {
modal.style.display= "none";
}
function closeOutside(e) {
if(e.target == modal){
modal.style.display = "none";
}
}
谢谢。
【问题讨论】：
-
嘿，我注意到你一直在这里问关于堆栈溢出的问题，但从不接受任何答案。你问了 14 个问题，总共得到了 20 个答案，但从未接受任何答案。至少对那些试图帮助你的人表示感谢不是很好吗？还是你得到的所有答案都没有帮助？
-
标题与您问题中的陈述相矛盾。你设法打开一个模式？但是现在你需要做点别的吗？你编辑你的问题了吗？请针对新问题开始新帖子。不要一直更新当前的问题。
-
很抱歉，我是新来的，我没有意识到这个规则......我会尽快感谢所有帮助我的人。谢谢！
-
好的，我会发一个新的。谢谢你的建议。
-
@YoheiUmezu 这不是一个规则（例如，不接受不会受到任何惩罚），但它应该将已解决的问题标记为接受。它可以帮助正在回答的人查看哪些问题已经解决并且不需要关注。
标签： javascript laravel laravel-5 dynamic modal-dialog