inclure un modal dans un script JS

par **wisefun77** » 17 août 2022, 11:54

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

<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();
})

par **Michal** » 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.

par **wisefun77** » 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

inclure un modal dans un script JS

Répondre

Étendre la vue Revue du sujet : inclure un modal dans un script JS

Re: inclure un modal dans un script JS

Re: inclure un modal dans un script JS

inclure un modal dans un script JS