0

Tengo un texto con hipervínculo y quiero que al dar click en el texto, se abra una imagen en otra ventana o sobrepuesta a la pantalla tipo popup.

Actualmente lo que hace es descargar la imagen, pero necesito que se muestre.

<p style="text-align: center; display: inline">
    <span style="font-family: Monaco, Arial, Helvetica, sans-serif; font-size: 22px; color: black;">
        <a style="text-decoration:none; color:#FFFFFF;" href="https://linkimagen.png" target="_blank">Calendario</a>
    </span>
</p>

1 respuesta 1

0

Podrías crear una pagina en blanco y hacer un link hacia ella, pero yo te recomendaría usar una librería, si estas usando jquery, te recomiendo jquery modal https://jquerymodal.com/

Para ello agrega lo siguiente a tu head

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />

Luego solo debes crear un div e ingresar tu información

<div id="imagen" class="modal">
  <img src="tu-imagen.jpg">
</div>

y luego hacer un enlace que abra dicho div basado en el id

<p><a href="#imagen" rel="modal:open">Ver imagen</a></p>

Veras algo asi, solo que con tu informacion

introducir la descripción de la imagen aquí

Posiblemente debas agregar css personalizado para dar el formato que quieres, la librería es muy fácil de usar y esta muy bien documentada

3
  • Muchas gracias Bro, me sirvió mucho .... Aunque no logré cambiar el ancho para aumentarlo, solo me cambiaba el alto. Sabes cómo puedo hacerlo?
    – KmiloRojas
    Commented el 4 dic. 2020 a las 21:27
  • Busca el elemento a editar con el inspector de código, pero puedes tomar de referencia la clase .modal, especialmente al width y max-with, que son los que debes de editar, prueba usar !important en caso de que no tome tus estilos, si mi respuesta te ayudo favor de marcar como aceptada Commented el 4 dic. 2020 a las 21:34
  • Perfecto, con el max-width si me dejó, muchas gracias por tu ayuda. Ya marqué como aceptada la respuesta.
    – KmiloRojas
    Commented el 4 dic. 2020 a las 21:59

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.