inclure un modal dans un script JS

Eléphant du PHP | 170 Messages

27 juil. 2022, 16:01

Bonjour,

Je viens de découvrir comment faire un modal.
Mais lorsque je clique sur le bouton rien ne se passe.
voici le code html basique qui fonctionne.

Code : Tout sélectionner

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Modal text</title> <link rel="stylesheet" href="CSS/Sstyle.css"> <link rel="stylesheet" href="Css/style.css"> <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> <script src="Js/apps.js"></script> </head> <body> <button id="myBtn">Ouvrir le Modal</button> <div id="myModal" class="modal"> <div class="modal-content"> <span class="close">&times;</span> <br> La chaine des Balises a été copié <br><br> Il suffit de la coller dans le "<b><u>Le champs Work Notes</u></b>" de ServiceNow. </div> </div>
Je voudrais l'inclure dans ce script JS dans la partie TRY

Code : Tout sélectionner

<form id="form-copier" > <!-- champ de saisie de texte --> <textarea class="js-text" id="texte" cols="80" rows="5"disabled="disabled"><?php echo $_SESSION["BalisesGeneral"]?></textarea> <br><br> <!-- Bouton copier --> <input type="button" class="js-copytextbtn" value="Copier les balises"> </form> <script> (() => { const button = document.querySelector('.js-copytextbtn'); button.addEventListener('click', () => { const text = document.querySelector('.js-text'); const range = document.createRange(); range.selectNode(text); window.getSelection().addRange(range); try { // var alerte="Champs Work Notes* " // alert('La chaine des Balises a été copié ! \n\r Il suffit de la coller dans le ' + alerte + 'de ServiceNow.'); document.location.replace('pagefin.php'); } catch (err) { alert('Pas possible de copier.'); } window.getSelection().removeAllRanges(); }); })(); </script
j'ai essayé mais cela ne fonctionne pas.

Code : Tout sélectionner

<form id="form-copier"> <!-- champ de saisie de texte --> <textarea class="js-text" id="texte" cols="80" rows="5" disabled="disabled"><?php echo $_SESSION["BalisesGeneral"] ?></textarea> <br><br> <!-- Bouton copier --> <input type="button" class="js-copytextbtn" class="modal-btn modal-trigger" value="Copier les balises"> </form> <script> (() => { const button = document.querySelector('.js-copytextbtn'); button.addEventListener('click', () => { const text = document.querySelector('.js-text'); const range = document.createRange(); range.selectNode(text); window.getSelection().addRange(range); try { </script> <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">La chaine des Balises a été copié.</h1> <p id="dialogDesc">Il suffit de la coller dans le "<b><u>Le champs Work Notes</u></b>" de ServiceNow.</p> </div> </div> <script src="Js/apps.js"></script> <script> } catch (err) { alert('Pas possible de copier.'); } window.getSelection().removeAllRanges(); }); })(); </script>
Merci
De retour au PHP pour essayer de trouver un emploi à 59 ans.

Petit nouveau ! | 1 Messages

02 août 2022, 16:41

Bonjour,

J'ai également essayé d'inclure un modal dans un script JS il y a quelques temps, mais je bloque aussi. Peut-être que quelqu'un sur le forum saura trouver la solution.

Eléphant du PHP | 170 Messages

17 août 2022, 11:54

Bonjour Michal,
Si cela peux t'aider.
Dans la page html

Code : Tout sélectionner

<button class="launch-modal">affiche modale</button> <div class="modal" aria-hidden="true"> j'affiche quelque chose dans ce block <button class="close">X</button> </div>
Dans la page js.js

Code : Tout sélectionner

document.querySelector('.launch-modal').addEventListener('pointerdown', e =>{ document.querySelector('.modal').setAttribute('aria-hidden', 'false'); e.preventDefault(); }) document.querySelector('.close').addEventListener('pointerdown', e =>{ e.target.closest('.modal').setAttribute('aria-hidden', 'true'); e.preventDefault(); })
De retour au PHP pour essayer de trouver un emploi à 59 ans.