javascript - 单击按钮时如何打开模态框

Question

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

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

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

我需要 JavaScript 才能做到这一点吗？不幸的是，我是 php 新手，我想知道是否可以只使用 html 和 css 来完成它。

我有一个 PostsController.php，其中呈现网站(操作页面)，并且我有 CommentsRepository.php，其中连接到数据库表评论发生。

这是评论部分的部分:

<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 withoutjavascript

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

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

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

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

希望它能以任何方式帮助您!