HTML – JS Cómo abrir una imagen en una imagen mediante un click sobre ella?

Que debo escribir algo de código en html o javascript u otros para abrir una ventana emergente al hacer clic en una imagen.
Ya he visto el window.open() método, pero esto no es lo que estoy buscando.
Precisamente quiero abrir una imagen emergente como Twitter: oscurecer el fondo y la visualización de la imagen agrandada en el centro de la pantalla.

Alguna sugerencia?

  • Por favor, incluya su código.
InformationsquelleAutor Alessio | 2015-10-05

4 Kommentare

  1. 3

    Puede utilizar un lightbox.

    Es realmente sencillo de utilizar. Incluir las etiquetas de scripts y hojas de estilo CSS en el archivo HTML, y luego simplemente utilizar:

    <a class="example-image-link" href="images/image-1.jpg" data-lightbox="example-1"><img class="example-image" src="images/thumb-1.jpg" alt="Girl looking out people on beach"></a>
  2. 2

    JS:

    //Get the modal
    var modal = document.getElementById('myModal');
    
    //Get the image and insert it inside the modal - use its "alt" text as a caption
    var img = document.getElementById('myImg');
    var modalImg = document.getElementById("img01");
    var captionText = document.getElementById("caption");
    img.onclick = function(){
        modal.style.display = "block";
        modalImg.src = this.src;
        captionText.innerHTML = this.alt;
    }
    
    //Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];
    
    //When the user clicks on <span> (x), close the modal
    span.onclick = function() { 
        modal.style.display = "none";
    }

    CSS:

    #myImg {
        border-radius: 5px;
        cursor: pointer;
        transition: 0.3s;
    }
    
    #myImg:hover {opacity: 0.7;}
    
    /* The Modal (background) */
    .modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        padding-top: 100px; /* Location of the box */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.9); /* Black w/opacity */
    }
    
    /* Modal Content (image) */
    .modal-content {
        margin: auto;
        display: block;
        width: 80%;
        max-width: 700px;
    }
    
    /* Caption of Modal Image */
    #caption {
        margin: auto;
        display: block;
        width: 80%;
        max-width: 700px;
        text-align: center;
        color: #ccc;
        padding: 10px 0;
        height: 150px;
    }
    
    /* Add Animation */
    .modal-content, #caption {    
        -webkit-animation-name: zoom;
        -webkit-animation-duration: 0.6s;
        animation-name: zoom;
        animation-duration: 0.6s;
    }
    
    @-webkit-keyframes zoom {
        from { -webkit-transform:scale(0)} 
        to { -webkit-transform:scale(1)}
    }
    
    @keyframes zoom {
        from {transform:scale(0)} 
        to {transform:scale(1)}
    }
    
    /* The Close Button */
    .close {
        position: absolute;
        top: 15px;
        right: 35px;
        color: #f1f1f1;
        font-size: 40px;
        font-weight: bold;
        transition: 0.3s;
    }
    
    .close:hover,
    .close:focus {
        color: #bbb;
        text-decoration: none;
        cursor: pointer;
    }
    
    /* 100% Image Width on Smaller Screens */
    @media only screen and (max-width: 700px){
        .modal-content {
            width: 100%;
        }
    }

    HTML:

    <!DOCTYPE html>
    <html>
    <head>
    
    </head>
    <body>
    
    <img id="myImg" src="https://www.w3schools.com/howto/img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200">
    
    <!-- The Modal -->
    <div id="myModal" class="modal">
      <span class="close">&times;</span>
      <img class="modal-content" id="img01">
      <div id="caption"></div>
    </div>
    
    </body>
    </html>

    Más :https://www.w3schools.com/howto/howto_css_modal_images.asp

  3. 1

    Puede utilizar Bootstrap, de lo contrario, hacer que un DIV con posición absoluta/fijo y centrado. Haga clic en obtener la URL de la imagen y poner esto dentro de la nueva DIV en una etiqueta img. Por último Añadir un fadeIn/a la nueva etiqueta DIV para el efecto.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea