Necesito abrir popup al hacer click

[natyale]

Hola querido foro, les cuento que estoy trancada con la creación de un popup, que quiero se abra desde una imagen. El pop que sea simple y que abra en toda la pagina para poder agregar otros links y que el usuario pueda seleccionar.

El código que tengo donde esta la imagen en el footer es el siguiente:

Código PHP:

  </div>

<div class="footer" id="footer">
 
 
  <div class="footer_item" style="border-right: 2px solid rgb(232, 232, 232);">
    <a href="https://www.sitio.com/"> 
      <img class="img_footer" src="https://www.misitio.com/icon/icono_chat.svg" width="35" height="35" alt="">
    </a> <br>
    <a href="#" class="link_footer">Abril</a>
  </div> 
   

El codigo para el popup es

PHP:

Código PHP:

  <script type="text/javascript">
<!--
function popup(url)
{
params  = 'width='+screen.width;
params += ', height='+screen.height;
params += ', top=0, left=0'
params += ', fullscreen=yes';

newwin=window.open(url,'windowname4', params);
if (window.focus) {newwin.focus()}
return false;
}
// -->
</script>

<a href="javascript: void(0)"
onclick="popup('popup.html')">Fullscreen popup window</a> 
  

Y el Css

CSS:

Código PHP:

  @charset "utf-8";
.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;
}
#popupBody{
    width: 46%;
    padding: 2%;
    border-radius: 15px;
    box-shadow: 0 0 5px #CCC;
    background: #FFF;
    position: relative;
    transition: all 5s ease-in-out;
    margin: 20% auto;    
}
#cerrar{
    position: absolute;
    top: 20px;
    right: 30px;
    transition: all 200ms;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    color: #F00;
} 
   

No se donde colocar el código para que abra el pop!

[petit89]

Tu codigo para que abra el popup es:

Código HTML:

<a href="javascript: void(0);" onclick="popup('popup.html');"> AQUI VA EL IMG </a>
 

que lo tienes en el segundo bloque de codigo que nos has mostrado... y en el primero donde veo la imagen lo integras asi:

Código HTML:

<div class="footer_item" style="border-right: 2px solid rgb(232, 232, 232);">
    <a href="javascript: void(0);" onclick="popup('popup.html');"> 
      <img class="img_footer" src="https://www.misitio.com/icon/icono_chat.svg" width="35" height="35" alt="">
    </a> <br>
    <a href="#" class="link_footer">Abril</a>
  </div>
 

y listo, si el codigo es funcional tiene que abrir popup.html

mira como funciona: https://jsfiddle.net/wqepzx27/

espero que te sirva
saludos!