Fenètre modale

Ce code ouvre bien une fenêtre clicable:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Modale Vanilla</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Raleway:wght@100;200;300;400;500;600;700;800;900&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>

    <div class="modal-container">

      <div class="overlay modal-trigger"></div>
     
      <div class="modal" role="dialog" aria-labelledby="modalTitle" aria-describedby="dialogDesc">
        <button 
        aria-label="close modal"
        class="close-modal modal-trigger">X</button>
        <h1 id="modalTitle">Voici du Contenu</h1>
        <p id="dialogDesc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut nam exercitationem nihil veritatis sapiente quia.</p>
      </div>

    </div>

    <button class="modal-btn modal-trigger">Open Modal</button>





    <script src="app.js"></script>
  </body>
</html>


CODE JS

const modalContainer = document.querySelector(".modal-container");
const modalTriggers = document.querySelectorAll(".modal-trigger");

modalTriggers.forEach(trigger => trigger.addEventListener("click", toggleModal))

function toggleModal(){
  modalContainer.classList.toggle("active")
}

CODE CSS

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Raleway, Helvetica, sans-serif;
  background: #f1f1f1;
}

.modal-btn {
  padding: 10px 14px;
  font-size: 18px;
  margin: 100px auto;
  display: block;
  min-width: 150px;
  cursor: pointer;
}

.modal-container {
  /* display: none; */
  visibility: hidden;
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  transition: visibility 0.4s;
}
.modal-container.active {
  /* display: block; */
  visibility: visible;
}

.overlay {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  background: #333333d3;
  transition: opacity 0.4s 0.2s ease-out;
}
.modal-container.active .overlay {
  opacity: 1;
  transition: opacity 0.4s ease-out;
}

.modal {
  opacity: 0;
  width: 95%;
  max-width: 500px;
  min-width: 300px;
  padding: 30px;
  background: #fff;
  border-radius: 5px;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, calc(-50% - 50px));
  transition: opacity 0.4s ease-out,
  transform 0.4s ease-out;
}

.modal-container.active .modal {
  opacity: 1;
  transform: translate(-50%, -50%);
  transition: opacity 0.4s 0.2s ease-out,
  transform 0.4s 0.2s ease-out;
}

.close-modal {
  padding: 8px 10px;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  background: #ff365e;
  color: #fff;
}
.modal h1 {
  margin-bottom: 10px;
  font-family: Montserrat, sans-serif;
  font-weight: 500;
}
.modal p {
  line-height: 1.4;
  margin-bottom: 5px;
}

Bonjour,

J'ai le soucis de réaliser une fenêtre modale à partir de ce code, et si je réussi à le faire à partir de rien, je n'arrive pas à adapter mon code pour ouvrir la partie "formulaire" dans une fenêtre modale et afficher les données de la ligne cliqué

Pourriez vous me guider et m'orienter svp

Merci beaucoup

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Modale Vanilla</title>
    <link rel="stylesheet" href="test.css" />

  </head>
  <body>

  <main class="main-content">
        <!-- DEBUT DE PAGE -->
    <div id="main">
        <header>
            <h1>USER LIST</h1>
        </header>
        <section>
            <h2>Enregistrements</h2>
            <table>
                <thead>
                    <tr>
                        <th width=7%>ID</th>
                        <th width=13%>Nom</th>
                        <th width=7%>Prenom</th>
                        <th width=10%>level</th>
                        <th width=7%%>ID</th>
                        <th width=12%>PASSWORD</th>
                        <th width=17%>CREATE</th>
                        <th width=17%>MODIF</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- CONSTRUCTION TABLEAU DES USERS -->
                    <?php
                    try {
                        $bdd = new PDO('mysql:host=localhost;dbname=xxx;charset=utf8', 'root', 'xxxx');
                    } catch (Exception $e) {
                        die('Erreur : ' . $e->getMessage());
                    }
                    $query = $bdd->prepare('SELECT * FROM USERS');
                    $query->execute();
                    while ($data = $query->fetch()) {
                    ?>
                        <tr onclick="fctClick(this)">
                            <td><?php echo $data['USER_CODE']; ?></td>
                            <td><?php echo $data['USER_NAME']; ?></td>
                            <td><?php echo $data['USER_PRENOM']; ?></td>
                            <td><?php echo $data['USER_LEVEL']; ?></td>
                            <td><?php echo $data['USER_ID']; ?></td>
                            <td><?php echo $data['USER_PASSWORD']; ?></td>
                            <td><?php echo $data['USER_CREATE']; ?></td>
                            <td><?php echo $data['USER_MODIF']; ?></td>
                        </tr>

                    <?php
                    }
                    ?>
                </tbody>
            </table>
            <h2>Formulaire</h2>
            <form method="GET" action="#" class="forma">
                    <table>
                    <fieldset class="fieldseta">
                        <legend>Données à modifier</legend>
                        <p><label>USER CODE</label><input type="text" name="CODE"></p>
                        <p><label>USER NAME</label><input type="text" name="Nom"></p>
                        <p><label>USER NAME 1</label><input type="text" name="Prenom"></p>
                        <p><label>USER LEVEL</label><input type="text" name="LEVEL"></p>
                        <p><label>USER ID</label><input type="text" name="ID"></p>
                        <p><label>USER PASS</label><input type="text" name="PASS"></p>
                        <p><label>USER CREATE</label><input type="text" name="CREATE"></p>
                        <p><label>USER MOFIF</label><input type="text" name="MODIF"></p>
                        <p><input type="submit" value="Modifier"><input type="reset" value="Annuler"></p>
                    </fieldset>
                    </table>
            </form>
        </section>
    </div>
    <script>
        function fctClick(obj) {
            // récup. formulaire
            var oForm = document.querySelector('form');
            // récup. INPUT type text
            var oInputs = oForm.querySelectorAll('input[type=text]');
            // transfert des contenus
            for (var i = 0, nb = obj.cells.length; i < nb; i += 1) {
                oInputs[i].value = obj.cells[i].textContent;
            }
        }
    </script>
  </body>
</html>

-
Edité par DominiqueSimon5 8 février 2024 à 14:39:06

DominiqueSimon5

8 février 2024 à 14:34:11