[Résolu] Fenêtre modal / pop up

Bonjour,
Je me retrouve confronter à un casse tête. J'ai mis en place un fenêtre qui s'ouvre sur mon clic. Jusqu'ici tout va bien sauf que lorsque je ferme la fenêtre à la fermeture du pop up elle m'envoie en haut de mon site alors que j'aimerai que la fermeture me laisse la ou je suis.

Une piste pour moi j'ai déjà fait plein de tentative et la je suis

Merci par avance

 <div id="agenda1"> 
   <div id="titrecontain">LES POM</div>
        <div id="imga">
           <img src="Image/pom_pablo.jpg" width="80%" height="80%" alt="pom">
        </div>
         Dans le cadre de la semaine du développement durable, nous serons présent au centre Pablo Néruda à Bagnolet. Le centre organise une soirée au cours de laquelle .... <br>
	<a href="#popup1"><span class="lire"><img src="Image/liresuite.png" width="10px" height="10px" vertical-align="middle"> Lire la suite</span> </a>


<div id="popup1" class="overlay">
	<div class="popup">
        <a class="close" href="#">&times;</a>
    <div id="contain">
        <div id="titrecontain">Projection POM</div>
		<br>
		<div id="imgcontain"><img src="Image/pom_pablo.jpg" width="100%" height="100%" vertical-align="top" alt="Pom"></div>
        
     Dans le cadre de la semaine du développement durable, nous serons présent au centre Pablo Néruda à Bagnolet. <br><br>            
            Nous sommes heureux de vous annoncer la projection des POM dans le cadre de la soirée de clôture de la semaine du développement durable du Centre Social et Culturel Pablo Neruda à partir de 18 h au 36, rue Pierre et Marie Curie à Bagnolet. Au cours de cette soirée vous pourrez également voir une représentation théâtrale, avec une collation de disco-smoothies et faire un Graphiteria.  <br>  </div> 
		</div>

#containagenda{
width: 68%;
height: 70%;
float: right;
text-align: justify;       
}


#imgcontain{
    width: 30%;
    height: 80%;
    float: left;
    text-align: left; 
    clear: left;
    margin-right: 2%;
}  

#titrecontain{
    font-family: 'champagne__limousinesbold'; 
    font-size: 30px;
    width: 100%;
    margin-bottom: 2%;
    height: 30px;
    color: black;
    text-align: center;
    margin-bottom: 5px;
    color: #fcb731;
    padding-top: 5px
    }



#containmemento{
width: 100%;
height: 100%;
background-position: left top;
background-repeat: no-repeat;
float: left;
}



.box {
  width: 40%;
  margin: 0 auto;
  background: rgba(255,255,255,0.2);
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}

.button {
  font-size: 1em;
  padding: 10px;
  color: #fff;
  border: 2px solid #06D85F;
  border-radius: 20px/50px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.button:hover {
  background: #06D85F;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 10% auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 50%;
    height: 50%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
float: right;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #06D85F;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}

Salut,

En faite, ton close ne marche pas, il refresh juste ta page. Pour gérer un evenement sur le click de la souris il faut utilisé javascript.

Merci je vais essayer çà . J'ai regardé c'est peut-etre aussi du au fait que mon

.popup {
  margin: 10% auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 50%;
    height: 50%;
  position: relative;
  transition: all 5s ease-in-out;
}

Prend comme réf de margin le haut de mon site et non la div dans lequel il se trouve. Je voulais éviter le javascript mais si j'ai pas le choix

non rien a voir avec le css... la croix en haut à droite de ta fenetre modale n'a aucun effet. à part rafraîchir la page car c'est une balise a href sans le return false.
Modifié par JENCAL (07 Sep 2017 - 11:15)

pas très complexe en JS voici l'exemple que j'ai fait : https://codepen.io/JUSEN/pen/JyqzMp

j'ai juste changer ton <a href=""> par un span

<span class="close" onclick="closeModal()">&times;</span>

rajouter un onclick pour appeler une méthode JS qui fait rien de spécial, juste un display none sur ta fenetre modale,

function closeModal()
{
 document.getElementById("popup1").style.display = "none";
}

et comme la "croix" n'est plus un lien j'ai rajouter un cursor:pointer également..
Modifié par JENCAL (07 Sep 2017 - 11:22)

et j'ai rajouter une méthode openModal() qui fait l'inverse.. sur l'ouverture de la popup.

<span class="lire" onclick="openModal()"><img src="Image/liresuite.png" width="10px" height="10px" vertical-align="middle"> Lire la suite</span> </a>

function openModal()
{
 document.getElementById("popup1").style.display = "block";
}

Je vais testé çà je te remercie. Enfin quand mon logiciel Brackets me refera correctement mes rendus

JENCAL je te remercie ça marche. Il va vraiment falloir que je me remette au java sur son fonctionnement cela fait 6 mois pas codé et j'ai un peu perdu. Merci encore

En réalité le lien servant à fermer le modal ne rafraîchit pas la page mais fait référence à une ancre vide :

<a class="close" href="#">&times;</a>

Tu peux donc rester en css en spécifiant une ancre factice mais valable du genre

<a class="close" href="#close">&times;</a>

et tu ajoutes après ton code un

<span id=close></span>

Comme tu peux le voir ici.