Le bouton ok de ma boite de dialogue ne la ferme pas
Résolu
flexi2202
Messages postés
3822
Date d'inscription
Statut
Membre
Dernière intervention
-
flexi2202 Messages postés 3822 Date d'inscription Statut Membre Dernière intervention -
flexi2202 Messages postés 3822 Date d'inscription Statut Membre Dernière intervention -
Bonsoir à tous,
J'ai un souci avec un extrait de mon code.
Lorsque l'utilisateur clique sur le bouton pour ouvrir une modale, celle-ci s'ouvre bien, mais ne se ferme pas si l'on clique en dehors de cette modale.
Jusque-là, tout fonctionne.
Mais en plus, lorsqu'on clique en dehors de la modale, un message dans une boîte de dialogue personnalisée s'affiche.
Mon problème est que je ne sais pas comment fermer cette boîte de dialogue personnalisée lorsque je clique sur le bouton "OK".
tout ce que je tente ne fonctionne pas voici mes codes
.dialog {
display: none;
position: fixed;
z-index: 999;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
}
.dialog-content {
background-color: white;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 600px;
}
.dialog-content button {
margin-top: 10px;
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
mon code html
<!-- Bouton pour ouvrir la modal -->
<button id="myBtn">Open Modal</button>
<!-- Modal HTML -->
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>ouverture modal</p>
</div>
</div>
<!-- Boîte de dialogue modale personnalisée -->
<div id="dialog" class="dialog">
<div class="dialog-content">
<p>ouverture boite dialogue personnalisee</p>
<button id="okBtn">OK</button>
</div>
</div>
et le javasript
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var dialog = document.getElementById("dialog");
var okBtn = document.getElementById("okBtn");
// Ouvre la modal lorsque l'utilisateur clique sur le bouton
btn.onclick = function() {
modal.style.display = "block";
}
// Ferme la modal lorsque l'utilisateur clique sur le bouton de fermeture
var closeButton = document.getElementsByClassName("close")[0];
closeButton.onclick = function() {
modal.style.display = "none";
}
// Affiche une boîte de dialogue modale personnalisée lorsque l'utilisateur clique en dehors de la modal
window.onclick = function(event) {
if (event.target == dialog) {
dialog.style.display = "none";
} else if (event.target == document.getElementById("myModal")) {
dialog.style.display = "block";
}
}
// Ferme la boîte de dialogue modale personnalisée lorsque l'utilisateur clique sur le bouton OK
okBtn.onclick = function() {
dialog.style.display = "none";
}
A voir également:
- Le bouton ok de ma boite de dialogue ne la ferme pas
- Se connecter à ma boite hotmail - Guide
- Dialogue boost - Accueil - Guide streaming
- Boite gmail pleine - Guide
- Boite gmail bloquée - Guide
- La boite a couleur - Télécharger - Divers Photo & Graphisme
2 réponses
Bonjour,
Aucun souci de mon côté ...
<html>
<head>
<meta charset="utf-8">
<style>
.dialog {
display: none;
position: fixed;
z-index: 999;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
}
.dialog-content {
background-color: white;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 600px;
}
.dialog-content button {
margin-top: 10px;
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
.modal{
height:200px;
display:none;
display: none;
}
.modal-content{
width:150px;
background-color:#01aa25;
}
</style>
</head>
<body>
<!-- Bouton pour ouvrir la modal -->
<button id="myBtn">Open Modal</button>
<!-- Modal HTML -->
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>ouverture modal</p>
</div>
</div>
<!-- Boîte de dialogue modale personnalisée -->
<div id="dialog" class="dialog">
<div class="dialog-content">
<p>ouverture boite dialogue personnalisee</p>
<button id="okBtn">OK</button>
</div>
</div>
<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var dialog = document.getElementById("dialog");
var okBtn = document.getElementById("okBtn");
// Ouvre la modal lorsque l'utilisateur clique sur le bouton
btn.onclick = function() {
modal.style.display = "block";
}
// Ferme la modal lorsque l'utilisateur clique sur le bouton de fermeture
var closeButton = document.getElementsByClassName("close")[0];
closeButton.onclick = function() {
modal.style.display = "none";
}
// Affiche une boîte de dialogue modale personnalisée lorsque l'utilisateur clique en dehors de la modal
window.onclick = function(event) {
console.log('event target',event.target);
if (event.target == dialog) {
dialog.style.display = "none";
} else if (event.target == modal) {
dialog.style.display = "block";
}
}
// Ferme la boîte de dialogue modale personnalisée lorsque l'utilisateur clique sur le bouton OK
okBtn.onclick = function() {
dialog.style.display = "none";
}
</script>
</body>
</html>
Assures toi de ne pas avoir d'erreur dans la console de ton navigateur et pense bien à vider complètement le cache..
bonjour jordane
Merci pour le code
Mais cela ne fonctionne pas correctement
car lorsque je clic sur le bouton la modal verte apparait bien
Mais lorsque je clic en dehors de cette modal la deuxieme n'apparait plus