L'ancre vers mon modal ne fonctionne pas [Résolu/Fermé]

Signaler
Messages postés
77
Date d'inscription
mercredi 26 novembre 2014
Statut
Membre
Dernière intervention
10 avril 2019
-
guedo
Messages postés
77
Date d'inscription
mercredi 26 novembre 2014
Statut
Membre
Dernière intervention
10 avril 2019
-
Bonjour à toutes et à tous,

Je me dirige vers vous car j'ai cherché sur internet comment réaliser un pop-up de type modal en html et css et j'ai trouvé des choses plus que satisfaisantes.
Toutefois, j'ai un problème.
En effet pour aller sur mon modal, je met un HREF dans une balise '<a>', mon navigateur écris correctement mon url : '.......php#modal' toutefois la page reste blanche et pour afficher mon popup, je doit rafraîchir la page avec l'url comprenant le '#modal' il en est de même lorsque je veut fermer la popup.
Voici mon code, si quelqu'un voit une erreur ou connait une solution je l'en remercie d'avance.
Mon code html
<div id="oModal" class="oModal">
  <div>
    <header>
      <a href="#about" title="Fermer la fenêtre" class="droite">X</a>
       <h2>Exemple de fenêtre « modal » stylisée </h2>
     </header>
     <section>
      <p>Description du message. </p>
     <section>
     <footer class="cf">
      <a href="#about" class="btn droite" title="Fermer la fenêtre">Fermer</a>
     </footer>
  </div>
</div>
 

    <div id="about" class="page">

        <div id="post-image" class="row" style="background-image: url('http://placehold.it/1920x1080');"> 
        
        	<div class="header-page padd-y-75">
        
                <div class="header-layer-page padd-y-75 bg-wh-alpha">
                
                    <div class="title-page padd-x-25 fs-clr">about us</div>
                    <!--<a href="contact-page.php" onclick="window.open(this.href, 'Popup', 'scrollbars=1,resizable=1,height=560,width=770'); return false;">valeur_de_la_variable_2</a>-->
                    <a href="#oModal">Ouvrir le popup</a>
                </div>
                
            </div>
                    
        </div>


et le css correspondant a mon modal :
.cf:before,
.cf:after {
  content:"";
  display:table;
}
.cf:after {
  clear:both;
}
.droite {
  float:right;
}
 
.oModal {
  position: fixed;
  z-index: 99999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  opacity:0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}
 
.oModal:target {
  opacity:1;
  pointer-events: auto;
}
 
.oModal:target > div {
  margin: 10% auto;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}
 
.oModal > div {
  max-width: 600px;
  position: relative;
  margin: 1% auto;
  padding: 8px 8px 8px 8px;
  border-radius: 5px;
  background: #eee;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}
 
.oModal > div header,.oModal > div footer {
  border-bottom: 1px solid #e7e7e7;
  border-radius: 5px 5px 0 0;
}
.oModal .footer {
  border:none;
  border-top: 1px solid #e7e7e7;
  border-radius: 0 0 5px 5px;
}
 
.oModal > div h2 {
  margin:0;
}
 
.oModal > div .btn {
  float:right;
}
 
.oModal > div section,.oModal > div > header, .oModal > div > footer {
  padding:15px;
}


Merci de votre aide
Cordialement.

1 réponse

Messages postés
4984
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
31 octobre 2019
964
Salut,

Le problème selon moi est que le popup est déjà affiché sur la page, même sans le "#modal", et donc même avant d’avoir cliqué.

Il est là mais ne se voit pas car il est en "opacity:0".

C’est donc comme si ta page (les liens, etc.) sont recouverts d’une vitre transparente (le popup) qui empêche la souris de cliquer dessus.

Essayes en mettant le "z-index" à "-1" en temps normal et à "99999" lors du ":target".

Le "pointer-events" est bien présent, mais il n’est pas supporté par tous les navigateurs, visiblement.

ÉDIT : chez moi ton code fonctionne correctement, que ce soit dans Firefox 42 ou dans Chromium 47.
Quel est ton navigateur ?


« glabedichlabediglabedichlacken [ma petite Scandinave] »
guedo
Messages postés
77
Date d'inscription
mercredi 26 novembre 2014
Statut
Membre
Dernière intervention
10 avril 2019
1
Salut,
J'ai réussi a résoudre mon probléme.
j'ai rajouté dans mon fichier script.js ceci:
$('#popup').click(function(e){
        	e.preventDefault();
        	$('.oModal').addClass('display');
    	})
    	$('.close-popup').click(function(e){
    		$('.oModal').removeClass('display');
    	})

et maintenant sa fonctionne.
le probleme était que le navigateur comprenait le href de mon ancre comme un changement de page et le js m'as résolu le probléme.
Merci pour ta participation