[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;
}