11480 sujets

JavaScript, DOM et API Web HTML5

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.

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

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

 <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
Modérateur
Hello,

ton code n'est pas explicite . Après, dans les conditions que je lis ton code, c'est pas extra. De toutes manières, jette un oeil à ce pen : https://codepen.io/niuxe/pen/oNqoLwY?editors=1011

J'ai fait ça rapidement. Donc, le code peut être largement amélioré. À toi de le faire
Modifié par niuxe (28 Jul 2022 - 16:25)
Meilleure solution
Bonjour niuxe,
C est génial.
Je ferai le test à mon retour de vacances.
Je n' ai pas l ordi avec moi. Smiley biggrin
Merci beaucoup.
Modifié par wisefun77 (31 Jul 2022 - 13:44)