单击按钮时如何打开模式

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即可打开的弹出窗口示例。 我发现这很有趣：

• 不带JavaScript的纯CSS弹出/模态框

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

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

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

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

这是它的外观，

编辑

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

您可以像以下示例一样自定义弹出窗口