Sujet Précédent Sujet Suivant

Le bouton ok de ma boite de dialogue ne la ferme pas

Résolu/Fermé
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 - Modifié le 21 avril 2023 à 00:09
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 - 22 avril 2023 à 13:26

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:

2 réponses

Réponse 1 / 2
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 718
21 avril 2023 à 09:57

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..
1
Réponse 2 / 2
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 187
21 avril 2023 à 10:07

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 
0
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 718
21 avril 2023 à 11:14

Je te dis... j'ai testé avec le code que je t'ai donné.... et ça fonctionne parfaitement !

Donc soit, dans ton code, tu as des erreurs ailleurs qui provoquent des erreurs dans la console de ton navigateur soit tu as un problème de cache.

0
flexi2202 Messages postés 3801 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 octobre 2024 187 > jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024
22 avril 2023 à 13:26

ok Jordane cela fonctionne parfaitement 

des fois , tu vides le navigateur et rien ne se passe ...

Merci

0

Discussions similaires

Coco chat connexion sur mobile, le tchat est fermé ?
Pisceneo -
brucine -

24 réponses
Ouvrir ma boite hotmail pour accéder à mes mails
mykette06 -
noella4646 -

4 réponses
comment avoir accès à ma boîte mail live.fr
mag -
Redbart -

1 réponse
Dame de pique sur internet
csP -
papyto -

51 réponses