单击按钮时如何打开模式

Question

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

我在每条评论旁边都有一个按钮，我希望在单击 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，但它确实让事情变得更容易！

我发现了一些在没有任何 javascript 的情况下打开的弹出窗口示例。我觉得这个很有趣：

• Pure CSS popup/modal box without javascript

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

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

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

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

这是它的外观，

编辑

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

您可以像这样自定义弹出窗口Example