0

Me gustaria saber como abrir una imagen en un popup , en mi codigo se muestra la imagen correctamente pero lo que quiero es que apretando un boton como "ver imagen" se pueda vizualizar la imagen , es posible hacerlo ?

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

Asi se ve mi imagen introducir la descripción de la imagen aquí

1
  • La respuesta a tu pregunta es si. busca un poco de javascript y veras que es sencillo. y si aun lo quieres mas sencillo puedes usar jQuery (Libreria de javascript que te hace mucho trabajo). el 8 jun. 2018 a las 5:43

1 respuesta 1

4

Si estás usando Bootstrap puedes usar los modals que incluye: Bootstrap modal .

En caso contrario puedes crear un modal con HTML, CSS y 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>

Este ejemplo en concreto se activa haciendo click en la imagen pero cambiando el img.onclick por un botón u otro elemento podrías activarlo desde otro sitio.

4
  • Me sirvio mucho gracias , pero coo puedo hacer para que en vez de una imagen sea un boton, que al apretar ese boton se muestre la imagen
    – Daniela
    el 8 jun. 2018 a las 14:09
  • Hola @Daniela lo que debes reemplazar es el <img id="myImg"......> por tu boton ejemplo <input type="button" id="abrirModal" onclick="miFuncion();"> el 8 jun. 2018 a las 14:27
  • con esto llamarias a una funcion donde estara el script para abrir el modal el 8 jun. 2018 a las 14:30
  • Mira tengo este script <script type="text/javascript"> $(function(){ $('.imagen').click(function(){ var imagen1=$(this).attr('src'); var titleimagen=$(this).attr('title'); if (imagen1==""){ $('.recibir-imagen').attr('src','51allout.co.uk/wp-content/uploads/2012/02/…); $('#mimodal').modal(); }else{ $('.recibir-imagen').attr('src',imagen1); $('.texto-imagen').text(titleimagen); $('#mimodal').modal(); } }); }); </script>
    – Daniela
    el 8 jun. 2018 a las 15:05

Tu Respuesta

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

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