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   -

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

jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 

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
flexi2202 Messages postés 3822 Date d'inscription   Statut Membre Dernière intervention   190
 

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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 

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 3822 Date d'inscription   Statut Membre Dernière intervention   190 > jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention  
 

ok Jordane cela fonctionne parfaitement 

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

Merci

0