我想让一个弹出窗口出现在php中答案

【问题标题】：I want to make a popup appear in php我想让一个弹出窗口出现在php中
【发布时间】：2022-02-01 05:59:11
【问题描述】：

我正在用 php 制作一个类似论坛的网站，我在每个问题容器中添加了一个按钮来删除论坛上的问题。我正在寻找一种在用户单击删除按钮时出现弹出窗口的方法。我正在使用引导程序，我在引导程序网站上找到了一个弹出模式。使用我当前的代码，单击按钮时会出现弹出窗口，并要求用户确认他要删除他的问题。问题是我不知道如何获取用户想要删除的问题的 ID，所以在我可以在我的 MySQL 数据库中删除它之后。

这是我当前的按钮，它位于 php echo '...' 中

<div class="col-1" title="delete your comment"><button name="delmsgbtn" class="btn-reseter" type="button" data-bs-toggle="modal" data-bs-target="#delmsg">delete</button></div>

这是来自引导程序的弹出模式，在单击按钮时显示

<div class="modal fade" id="delmsg" tabindex="-1" aria-labelledby="delmsgLabel" aria-hidden="false">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="delmsgLabel">Are you sure you want to delete this message?</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">cancel</button>
        <button type="button" class="btn btn-danger">delete</button>
      </div>
    </div>
  </div>
</div>

我的想法是将用户重定向到同一页面，但 url 包含问题 ID，所以之后我可以使用 get 方法获得它。所以我通过添加重定向来修改按钮。

新按钮也在 php echo 中，这就是反斜杠的原因

<div class="col-1" title="delete your comment"><button name="delmsgbtn" class="btn-reseter" onclick="location.href = \'course.php?courseid='.$_GET["courseid"].'&quesid='.$idQues.'\';" type="button" data-bs-toggle="modal" data-bs-target="#delmsg">delete</button></div>

但是这样做时，页面会刷新并且弹出窗口会消失。你能帮帮我吗？

【问题讨论】：

弹出窗口必须在客户端 JavaScript 中完成，而不是 PHP。

标签： php html bootstrap-modal

【解决方案1】：

首先，修改您的模态打开按钮。应该是这样的

<button class="btn-reseter delmsgbtn" data-comment_id="<?= PHP_COMMENT_ID ?>">delete</button>

请务必将 PHP_COMMENT_ID 替换为包含 cmets ID 的实际 PHP 变量。

将模式中的“删除”按钮替换为表单。

<form method="POST" action="PHP_PROCESS_SCRIPT">
    <input type="hidden" name="comment_id" id="comment_id_input"/>
    <button type="submit" class="btn btn-danger">delete</button>
</form>

确保PHP_PROCESS_SCRIPT 指向PHP 脚本以处理评论删除。此外，如果适用，请确保在此脚本中实际允许删除评论的用户。

创建一个点击处理程序来打开模式，而不是内联属性。

<script>
    $('.delmsgbtn').on('click', function() {
        
        //update #comment_id_input in the popup form, 
        //based on data-comment_id added to the button from the first snippet
        $('#comment_id_input').val($(this).data('comment_id')); 

        $('#delmsg').modal('show'); //open the modal
    });
<script>

表单提交后，你挂接的PHP脚本会得到一个值$_POST['comment_id']。

或者，您可以从附加到模式内删除按钮的单击处理程序进行 ajax 调用。如果您想阻止页面刷新，这会更好。首先，像这样修改删除按钮

<button id="delmsg_submit" type="button" class="btn btn-danger">delete</button>

然后，添加一些点击处理程序

<script>
    var active_comment_id = null;

    $('.delmsgbtn').on('click', function() {

        //update active_comment_id, 
        //based on data-comment_id added to the button from the first snippet
        active_comment_id = $(this).data('comment_id'); 

        $('#delmsg').modal('show'); //open the modal
    });

    $('#delmsg_submit').on('click', function() {
       if(active_comment_id) {
           //send ajax call
       }
    });
<script>

【讨论】：

【解决方案2】：

我会将元素的 id 放在 php 中

喜欢

<button id="element-id-<?php echo $id ?>" class="myBtn" >

然后我会使用 javascript 函数来执行对数据库的调用

<script>
const btn = document.querySelector('.myBtn')

btn.addEventLIstener('click', () => {
  const elementId = this.id //then remove the 'element-id-' from the value
  const data = { id: elementId }
  fetch( URLforBackend, {
   method: 'post',
   headers: {
     'Content-Type': 'application/json'
    }
    body: JSON.stringify(data)
  })
</script>

这将为您的后端提供 id。在php中，在那里，只需删除

【讨论】：