inclure un modal dans un script JS

inclure un modal dans un script JS - Javascript/Node.js - Programmation

Marsh Posté le 27-07-2022 à 15:59:38    

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 :
  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3.  
  4. <head> 
  5.     <meta charset="UTF-8"> 
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
  8.     <title>Modal text</title> 
  9.     <link rel="stylesheet" href="CSS/Sstyle.css"> 
  10.     <link rel="stylesheet" href="Css/style.css"> 
  11.     <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> 
  12.     <script src="Js/apps.js"></script> 
  13. </head> 
  14.  
  15. <body> 
  16.  
  17.     <button id="myBtn">Ouvrir le Modal</button> 
  18.  
  19.     <div id="myModal" class="modal"> 
  20.  
  21.  
  22.         <div class="modal-content"> 
  23.             <span class="close">&times;</span> 
  24.             <br> 
  25.             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. 
  26.            </div> 
  27.     </div>


Je voudrais l'inclure dans ce script JS dans la partie TRY

Code :
  1. <form id="form-copier" >
  2.         <!-- champ de saisie de texte -->
  3.         <textarea class="js-text" id="texte"  cols="80" rows="5"disabled="disabled"><?php echo $_SESSION["BalisesGeneral"]?></textarea>
  4.         <br><br>
  5.         <!-- Bouton copier -->
  6.         <input type="button" class="js-copytextbtn" value="Copier les balises">
  7.         
  8.     </form>
  9.         <script>
  10.             (() => {
  11.                 const button = document.querySelector('.js-copytextbtn');
  12.  
  13.                 button.addEventListener('click', () => {
  14.                     const text = document.querySelector('.js-text');
  15.                     const range = document.createRange();
  16.  
  17.                     range.selectNode(text);
  18.                     window.getSelection().addRange(range);
  19.  
  20.                     try {
  21.                          //     var alerte="Champs Work Notes* "
  22.                         //  alert('La chaine des Balises a été copié ! \n\r Il suffit de la coller dans le ' + alerte + 'de ServiceNow.');  
  23.                         document.location.replace('pagefin.php');
  24.                        
  25.                     } catch (err) {
  26.                         alert('Pas possible de copier.');
  27.                     }
  28.                     
  29.                     window.getSelection().removeAllRanges();
  30.                 });
  31.             })();
  32.         </script


j'ai essayé mais cela ne fonctionne pas.

Code :
  1. <form id="form-copier">
  2.                 <!-- champ de saisie de texte -->
  3.                 <textarea class="js-text" id="texte" cols="80" rows="5" disabled="disabled"><?php echo $_SESSION["BalisesGeneral"] ?></textarea>
  4.                 <br><br>
  5.                 <!-- Bouton copier -->
  6.                 <input type="button" class="js-copytextbtn" class="modal-btn modal-trigger" value="Copier les balises">
  7.  
  8.             </form>
  9.             <script>
  10.                 (() => {
  11.                         const button = document.querySelector('.js-copytextbtn');
  12.  
  13.                         button.addEventListener('click', () => {
  14.                                     const text = document.querySelector('.js-text');
  15.                                     const range = document.createRange();
  16.  
  17.                                     range.selectNode(text);
  18.                                     window.getSelection().addRange(range);
  19.  
  20.                                     try {
  21.             </script>
  22.             <div class="modal-container">
  23.                 <div class="overlay modal-trigger"></div>
  24.  
  25.                 <div class="modal" role="dialog" aria-labelledby="modalTitle" aria-describedby="dialogDesc">
  26.                     <button aria-label="close modal" class="close-modal modal-trigger">X</button>
  27.                     <h1 id="modalTitle">La chaine des Balises a été copié.</h1>
  28.                     <p id="dialogDesc">Il suffit de la coller dans le "<b><u>Le champs Work Notes</u></b>" de ServiceNow.</p>
  29.                 </div>
  30.  
  31.             </div>
  32. <script src="Js/apps.js"></script>
  33.             <script>
  34.                 } catch (err) {
  35.                     alert('Pas possible de copier.');
  36.                 }
  37.  
  38.                 window.getSelection().removeAllRanges();
  39.                 });
  40.                 })();
  41.             </script>


 
Merci


---------------
De retour au PHP après plus de 12 ans d'absence pour retrouver un emploi.
Reply

Marsh Posté le 27-07-2022 à 15:59:38   

Reply

Marsh Posté le 27-07-2022 à 21:17:53    

Le modal existe dans le HTML dans tous les cas, c'est son affichage/activation qui se fait via un appel du JS (à travers un évènement).
Pour modifier le DOM en JS il faut utiliser des méthodes spécifiques, tu ne peux pas juste écrire du HTML puisque le document a déjà été interprété par le navigateur.


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 27-07-2022 à 22:29:26    

C'est très bien de vivre ses rêves mais à un moment donné la programmation quitte le champs de la poésie pour atteindre celui de la rigueur...
 
Pour le moment un ordinateur exécutant du code n'a pas encore l’intelligence suffisante pour comprendre ce que tu veux faire, c'est a toi de te plier à ses capacités.
Du coups je te conseilles de suivre des tutoriels (chacun ses préférences : vidéo youtube, cours en ligne, ou carrément exemple concret et documentation du langage) pour comprendre un minimum ce que tu fait.
Moi j'ai faillis lâcher l'affaire ligne 9-10

Code :
  1. <link rel="stylesheet" href="CSS/Sstyle.css">
  2. <link rel="stylesheet" href="Css/style.css">


Puis je me suis dit c'est pas si grave, faut bien apprendre, et là ligne 9-41 de ton 3eme bloc de code, consternation:

Code :
  1. <script>
  2.                 (() => {
  3.                         const button = document.querySelector('.js-copytextbtn');
  5.                         button.addEventListener('click', () => {
  6.                                     const text = document.querySelector('.js-text');
  7.                                     const range = document.createRange();
  9.                                     range.selectNode(text);
  10.                                     window.getSelection().addRange(range);
  12.                                     try {
  13.             </script>
  14.             <div class="modal-container">
  15.                 <div class="overlay modal-trigger"></div>
  17.                 <div class="modal" role="dialog" aria-labelledby="modalTitle" aria-describedby="dialogDesc">
  18.                     <button aria-label="close modal" class="close-modal modal-trigger">X</button>
  19.                     <h1 id="modalTitle">La chaine des Balises a été copié.</h1>
  20.                     <p id="dialogDesc">Il suffit de la coller dans le "<b><u>Le champs Work Notes</u></b>" de ServiceNow.</p>
  21.                 </div>
  23.             </div>
  24. <script src="Js/apps.js"></script>
  25.             <script>
  26.                 } catch (err) {
  27.                     alert('Pas possible de copier.');
  28.                 }
  30.                 window.getSelection().removeAllRanges();
  31.                 });
  32.                 })();
  33.             </script>


Je ne saurais pas ou commencer mais clairement il y'a des lacunes, je t'incite à ne pas mettre la charrue avant les bœufs et à apprendre à ton rythme mais en commençant par la base pacque là, ça ne risque pas de marcher !
 
Y'a pas de soucis on peut aider sur ce forum mais là (et sans vouloir te décourager), y'a trop à dire pour que ça en vaille la peine... :o


Message édité par mechkurt le 28-07-2022 à 06:01:40

---------------
D3
Reply

Marsh Posté le 28-07-2022 à 09:22:39    

Bonjour mechkurt MaybeEijOrNot,
 
Merci pour votre aide.  
Je vais suivre vos conseils.
Merci.


---------------
De retour au PHP après plus de 12 ans d'absence pour retrouver un emploi.
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed