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

标签 javascript php html button modal-dialog

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

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

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

我需要 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 来做到这一点。

最佳答案

您不需要需要 JavaScript,但它确实会让事情变得更容易!

我发现了一些无需任何 JavaScript 即可打开的弹出窗口示例。我发现这个很有趣:

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

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

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

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

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

关于javascript - 单击按钮时如何打开模态框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54126194/

相关文章:

javascript - 为什么 Angular 2 的 CanActivate 返回 Observable<boolean> 而不是 Promise?

javascript - Webpack 5字体 Assets 问题,没有错误但也没有字体

html - CSS 选择器优化

html - 如何删除内联子容器右侧的额外空间?

html - 响应式文档 block 的语义标记

javascript - toLocaleDateString() 短格式

Javascript - 检查对象属性存在时避免异步竞争条件

php - post方法传递电子邮件并将该用户名插入另一个表时,如何从表中选择用户名?

php - 在使用 PHP 的 getopt() 之后,我如何知道保留了哪些参数?

php - MySQL 使用 RegEx 更新/选择列