how to open an image in a popup

Question

how to open an image in a popup

Navigation

#1 by (1 votes)

0

I would like to know how to open an image in a popup, in my code the image is shown correctly but what I want is that pressing a button like "see image" can visualize the image, is it possible to do it?

<div class="starter-template">
    <br>
    <br>
    <br>
    <div class="row">
        <div class="col-md-8">
            <div class="panel panel-default">
                <div class="panel-body">

                        <form action="ejecutaactualizar.php" method="post">
                        <legend>Detalle solicitud</legend>
                        <div class="form-group">
                            <label for="nombre">Folio</label>
                            <input type="text" name="id" class="form-control" id="nombre" value="<?php echo $id ?>" readonly="readonly" autofocus required >

                        </div>
                        <div class="form-group">
                            <label for="nombre">Nombre</label>
                            <input type="text" name="nombre" class="form-control" id="nombre" value="<?php echo $nombre ?>"   readonly="readonly" autofocus required placeholder="Ingresa tu nombre">
                        </div>

                        <div class="form-group">
                            <label for="email">Rut</label>
                            <input type="text" name="rut" class="form-control" id="email"  value="<?php echo $rut ?>"  readonly="readonly" autofocus required >
                        </div>

                        <div class="form-group">
                            <label for="correo">Correo</label>
                            <input type="text" name="email" class="form-control" id="usuario"  value="<?php echo $email ?>"    readonly="readonly" autofocus required placeholder="usuario">
                        </div>
                        <div class="form-group">
                            <label for="correo">Direccion</label>
                            <input type="text" name="direccion" class="form-control" id="usuario"  value="<?php echo $direccion ?>"  readonly="readonly" autofocus required placeholder="usuario">
                        </div>
                        <div class="form-group">
                            <label for="correo">Poste</label>
                            <input type="text" name="poste" class="form-control" id="usuario"  value="<?php echo $poste ?>"   readonly="readonly" autofocus required placeholder="usuario">
                        </div>
                        <div class="form-group">
                            <label for="password">Mensaje</label>
                            <input type="text" name="mensaje" class="form-control" id="usuario"  value="<?php echo $mensaje ?>"   readonly="readonly"  autofocus required placeholder="usuario">
                        </div>

                     <div class="form-group">
                            <label for="nombre">Fecha</label>
                            <input type="text" name="fecha" class="form-control" id="nombre" value="<?php echo $fecha ?>"   readonly="readonly" autofocus required placeholder="Ingresa tu nombre">
                        </div>
                        <div class="form-group">
                            <label for="nombre">Estado</label><input type="text" name="estado" class="form-control" id="estado" value="<?php echo $estado ?>"   readonly="readonly" >
                            <br><SELECT name="estado" size ="1" id="estado" style="width:300px " value="<?php echo $estado?>">
                            <option>Seleccionar Opcion</option> 
                    <option value="Pendiente">Pendiente</option>
                         <option value="Resuelto">Resuelto</option>
                          <option value="Rechazado">Rechazado</option>

                        </div></SELECT></div>
                         <div class="form-group">
                            <label for="nombre">Servicio</label>
                            <div></div>

                             <textarea name="abstract" id="abstract" size="500"  rows="10" cols="80" readonly="readonly"><?php echo $servicio?></textarea>

                        </div>  
                        <div class="form-group">
                            <label for="password">Fecha Reporte</label>
                            <input type="text" name="fecharec" class="form-control" id="usuario"  value="<?php echo $fechares ?>"   readonly="readonly"  autofocus required placeholder="usuario">
                        </div>
                    </head>
                    <body>
                        <div class="form-group">
                    <img src="images/<?php echo $imagen ?>" class="img-rounded" width="250px" height="250px" /></div>
                    <button type="submit" class="btn btn-success">Editar</button>
                    <a href="admin.php" title='Editar datos' class='btn btn-danger'>Volver</a>

                    </form>             

                   </form>      
                   <br>

That's how my image looks

javascript html css

asked by Daniela 08.06.2018 в 06:21

source

1 answer

error when creating a reactive project using npx Problem to update record with php and mysql combobox?

score 1 · Accepted Answer

If you are using Bootstrap you can use the modalities that include: Bootstrap modal .

Otherwise you can create a modal with HTML, CSS and JavaScript:

var modal = document.getElementById('popUp');

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

var span = document.getElementsByClassName("close")[0];

span.onclick = function() { 
  modal.style.display = "none";
}

#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

.modal {
    display: none; 
    position: fixed; 
    z-index: 1; 
    padding-top: 100px; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.9); 
}

.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

.modal-content, #caption { 
    animation-name: zoom;
    animation-duration: 0.6s;
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

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

@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}

<img id="myImg" src="http://jsequeiros.com/sites/default/files/imagen-cachorro-comprimir.jpg" alt="Snow" width="300" height="200">

<div id="popUp" class="modal">
  <span class="close">&times;</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>

This particular example is activated by clicking on the image but changing the img.onclick by a button or another element could activate it from another site.