单击按钮时如何打开模式

Question

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

每个评论旁边都有一个按钮，我希望在单击delete button时打开一个模式框。

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

我需要使用JavaScript来做到这一点吗？不幸的是，我是php的新手，我想知道是否有可能仅使用html＆css。

我有一个PostsController.php，其中呈现了网站（操作页面），我有CommentsRepository.php，其中与数据库表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：https://www.w3schools.com/howto/howto_css_modals.asp

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

Answer 2

您不需要不需要 javascript，但这肯定会使事情变得简单！

我找到了一些没有任何JavaScript即可打开的弹出窗口示例。我发现这很有趣：

• Pure CSS popup/modal box without javascript

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

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

该链接将针对您的弹出窗口，触发 target 伪类，并显示您的弹出窗口！

还有Jeppe Spanggaard推荐的 Bootstrap 选项，效果很好！

希望它有任何帮助！

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'
    )
  }
})

这是它的外观，

编辑

根据您的评论，我认为这可能会有所帮助JsFiddle

您可以像这样Example

自定义弹出窗口