如何在单击按钮时打开模态

Question

在我编写的博客的评论部分，我希望管理员能够删除评论。

我在每个评论旁边都有一个按钮，我想在点击delete button时打开一个模态框。

在这个模式框中，我想再次询问是否应该删除评论，如果是，那么它应该引导我回到帖子并且评论应该被删除。

我需要javascript才能执行此操作吗？不幸的是我是php的新手，我想知道是否可以只使用html和css。

我有一个PostsController.php在其中呈现网站（操作页面），我有CommentsRepository.php，其中发生与db表comments的连接。

这是评论部分的一部分：

<div class="comments-list">
 <?php foreach ($comments AS $comment): ?>
  <div class="one-comment">
   <p><?php echo e($comment->content); ?></p>
   <div class="one-comment-edit">
    <input type="button" value="x" name="delete" class="delete-comment" />
   </div>
  </div>
 <?php endforeach; ?>
</div>

我知道如何进行查询，但我不知道如何在单击按钮时打开模态框。

如果有人可以帮助我，我真的很感激，特别是如果我需要javascript来做这件事。

Answer 1

你不需要javascript，但它确实让事情变得更容易！

我发现了一些没有任何javascript打开弹出窗口的例子。我觉得这个有用了：

• Pure CSS popup/modal box without javascript

为此，他们创建了一个带有visibility: hidden; css属性的弹出窗口，他们使用target伪类将此属性设置为visibility: visible;

要触发目标伪类，它们会创建一个引用弹出窗口ID的链接（类似按钮）。

该链接将定位您的弹出窗口，触发目标伪类，并显示您的弹出窗口！

还有Jeppe Spanggaard推荐的Bootstrap选项，工作正常！

希望它能以任何方式帮助你！

Answer 2

你可以使用javascript：https://www.w3schools.com/howto/howto_css_modals.asp

但是如果你使用Bootstrap，有一种更简单的方法：https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_modal&stacked=h

Answer 3

您可以将SweetAlert用于您的事业，它更优雅且易于使用。

https://sweetalert2.github.io/

这是工作示例：Jsfiddle

只需在删除按钮上单击应用以下代码

Swal({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  type: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, delete it!'
}).then((result) => {
  if (result.value) {
    Swal(
      'Deleted!',
      'Your file has been deleted.',
      'success'
    )
  }
})

这是它的外观，

编辑

根据你的评论，我认为这可能是有用的qazxsw poi

您可以像这个JsFiddle一样自定义弹出窗口