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

Résolu
flexi2202 Messages postés 3640 Date d'inscription   Statut Membre Dernière intervention   -  
flexi2202 Messages postés 3640 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";
  }

2 réponses

  1.
    jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 832
     

    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
  2. flexi2202 Messages postés 3640 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
    1. jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 832
       

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

Discussions similaires

wannonce en panne
pourquoi62 -
BmV -

7 réponses
Wannonce down : fermeture judiciaire
audrey130 -
Flixty -

88 réponses
Bouton ON/OFF : O ou I, quel côté est allumé
Stargirlfr -
kaparzo23 -

12 réponses
je n'arrive plus a fermer microsoft word
pandora -
hyperlaurent -

2 réponses
Comment fermer une boite de dialogue
2095 -
SR -

3 réponses