inclure un modal dans un script JS

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : inclure un modal dans un script JS

wisefun77

Vivre ses rêves

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 :

<!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 :

<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 :

<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 après plus de 12 ans d'absence pour retrouver un emploi.

Publicité

MaybeEijOrNot

but someone at least

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.

mechkurt

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 :

<link rel="stylesheet" href="CSS/Sstyle.css">
<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 :

<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>

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...

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

---------------
D3

wisefun77

Vivre ses rêves

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.

FORUM HardWare.fr

Programmation

Javascript/Node.js

inclure un modal dans un script JS

Sujets relatifs
Script bash/python extraire données bdd	Transformer script Powershell en batch
[Powershell] [RESOLU] Script pour mettre à jour Firefox	[PowerShell] Script SFTP avec authentification par clé de f
Création d'un .bat ou script PowerShell pour partage de dossiers.	Script CSV en JSON
Divers - problème de formulaire HTML / CSS / JS	Exclure script du preloader
Inclure une page suivant un formulaire	Utilisation de script VBS avec récupération de l'utilisateur courant p
Plus de sujets relatifs à : inclure un modal dans un script JS

Page générée en 0.090 secondes