How do I open a modal window with a link ?id=<? echo $user['id']?> to make changes to the database without going to another page?

There is a code like this

  <td>
    <a href="includes/update.php?id=<? echo $user['id']?>" class="edit">Изменить</a>
  </td>

A page opens for changing the data in the Mysql table. But I want a modal window to open when clicked. Here is the finished modal window code using the button.

<button tupe="open" onclick="window.myDialog.showModal()" class="editbtn">Изменить</button>
<dialog id="myDialog" class="modal">
  <div class="reg">
    <h6>Изменить данные</h6>
    <form method="POST">
      <?
       include('../../includes/db.php');
       $id = $_GET['id'];
       $query = mysqli_query($connect, query: "SELECT * from `users` where ID='$id'");
       while($row = mysqli_fetch_array($query)) {
      ?>
      <div class="reg-box">
        <input type="text" value="<? echo $row["lastname"]?>" name="lastname" placeholder="Фамилия">
      </div>
      <div class="reg-box">
        <input type="text" value="<? echo $row["name"]?>" name="name" placeholder="Имя">
      </div>
      <div class="reg-box">
        <input type="text" value="<? echo $row["fathername"]?>" name="fathername" placeholder="Отчество">
      </div>
      <div class="reg-box">
        <input type="number" value="<? echo $row["code"]?>" name="code" placeholder="Личный номер">
      </div>
      <div class="reg-box">
        <input type="text" value="<? echo $row["username"]?>" name="username" placeholder="Логин">
      </div>
      <div class="reg-box">
        <input type="number" value="<? echo $row["password"]?>" name="password" placeholder="Пароль ()">
      </div>
      <? } ?>    
      <button tupe="reg" class="btn">Изменить</button>
    </form>
  </div>
  <style type="text/css">
    dialog {
      margin-inline: auto;
      margin-block-start: 120px;
      background: transparent;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.211);
      border: none;
      border-radius: 1rem;
    }
    dialog::backdrop {
      background-color: rgba(0, 0, 0, 0.2);
    }
  </style>
</dialog>

Help me implement this, as I still don’t understand it very well.
I need a ready-made working version of my code.

There are so many tutorials on this. So, instead of duplicating one of them, try this one to get started.
And, if you get stuck post your new code and ask for further help. Good luck!

HTML-CSS Modal example

Sponsor our Newsletter | Privacy Policy | Terms of Service