Partage

Double modal en JS

Sujet résolu
3 janvier 2018 à 18:29:32

Bonsoir et bonne année à vous,

Je viens cette fois-ci avec un problème en Javascript...

Je m'explique, je souhaite faire un système de connexion/inscription sous forme de deux modal distingués par un ID différent chacun, ça fonctionne parfaitement mais le problème c'est que je souhaite faire en sorte que lorsqu'on clique à côté du contenu du modal, ça se ferme. Ca fonctionne sur un modal mais pas sur l'autre...

Voici le code

	$('.my-btn').on('click', function(){
  $('#'+$(this).data('modal')).css('display','block');
})

window.onclick = function(event) {
  if (event.target.className == 'modal') {
    $('.modal').hide();
  }
}

Alors voilà, je suis super novice en JS du coup je ne sais pas si le code est correct ou pas (je l'ai récupéré sur un site et je l'ai simplifié) mais en tout cas si quelqu'un a une idée je suis preneur !

Vous êtes demandeur·se d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur·se web junior

Je postule
Formation
courte
Financée
à 100%
3 janvier 2018 à 18:42:03

Bonjour,

Peut tu nous montrer ton Code HTML ?

Si vous voulez me mp, venez sur Discord (username: Stelyus#8984)
3 janvier 2018 à 19:13:49

<!-- The Modal 1 -->
<div id="Register" class="modal">  
  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
    	<div class="world"></div>
      <h2>Créer mon personnage</h2>
      <p>Remplis les champs ci-dessous pour compléter ton inscription sur Site</p>
    </div>
    <div class="modal-title">
    	<h3>Créer son compte</h3>
    	<div class="landing"></div>
    </div>
    <div class="modal-body">
    	<div class="left">
    		<div class="world"></div>
    	</div>

    	<div class="right">
    		<div class="center">
				<form autocomplete="off">
				    <input type="text" spellcheck="false" name="username" placeholder="Pseudonyme" />
				    <input type="email" spellcheck="false" name="email" placeholder="Email" />
				    <input type="password" spellcheck="false" name="password" placeholder="Mot de passe" />
				    <input type="password" spellcheck="false" name="repassword" placeholder="Encore une fois..." />
				    <input type="button" value="J'ai terminé! Créer mon Bobba" />
				</form>
			</div>     		
    	</div>
    </div>
  </div>
</div>


<!-- The Modal 2 -->
<div id="Login" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
    	<div class="world"></div>
      <h2>Connexion sur Site</h2>
      <p>Connecte-toi sur Site et amuse toi bien !</p>
    </div>
    <div class="modal-title">
    	<h3>Se connecter</h3>
    	<div class="landing"></div>
    </div>    
    <div class="modal-body">
    	<div class="left">
    		<div class="world"></div>
    	</div>

    	<div class="right">
    		<div class="center-login">
				<form autocomplete="off">
				    <input type="text" spellcheck="false" name="username" placeholder="Pseudonyme" />
				    <input type="password" spellcheck="false" name="password" placeholder="Mot de passe" />
				    <input type="button" value="Se connecter" />
				</form>
			</div>     		
    	</div>
    </div>
  </div>
</div>	

Voilà pour la partie HTML
5 janvier 2018 à 19:47:41

Je me permet de UP mon sujet...
5 janvier 2018 à 21:54:15

Je ne comprend pas tres bien ton probleme,

Lorsque je teste ton code aucun modal ne se ferme, que compte tu faire exactement ? Où-est ce que c'est à côté du contenu pour toi?

-
Edité par Stelyus 5 janvier 2018 à 21:54:56

Si vous voulez me mp, venez sur Discord (username: Stelyus#8984)
6 janvier 2018 à 15:18:53

Stelyus a écrit:

Je ne comprend pas tres bien ton probleme,

Lorsque je teste ton code aucun modal ne se ferme, que compte tu faire exactement ? Où-est ce que c'est à côté du contenu pour toi?

-
Edité par Stelyus il y a environ 17 heures


Non, enfaîte j'ai 2 modal "Register" et "Login". Le modal "Register" se ferme très bien lorsque je clique en dehors de son contenu, par contre le modal "Login" ne se ferme pas lorsque je clique en dehors de son contenu... Du coup je souhaite faire en sorte que le modal login se ferme également lorsque je clique en dehors de son contenu, tout simplement...

-
Edité par Badzyyy 6 janvier 2018 à 15:19:00

6 janvier 2018 à 16:02:33

Si register se ferme bien alors tu ne m'as pas montré tout ton code Javascript, $(.modal).hide() hide tous les elements qui ont une classe 'modal', je vois pas ou est ce que tu peux hide juste register
Si vous voulez me mp, venez sur Discord (username: Stelyus#8984)
7 janvier 2018 à 20:29:19

Sujet résolu grâce à @Stelyus (via Discord).

Pour le problème il s'agissait d'un fichier JS que j'avais oublié d'enlever qui foutait la merde :-°

Double modal en JS

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown