Mostrar información en ventana modal

[ik_fenix]

Hola
Tengo un formulario llamado ingreso, que tiene un solo campo, Cédula.
La idea es que el usuario ingresa la ce dula y en base de datos se guarda la hora de ingreso para esa fecha de ses usuario.
Lo que requiero es mostrar a la persona que se ingreso, la foto, nombre, apellido, cédula y horario en el que esta registrado.
Inicialmente pensaba mostrar esto en una ventana modal ya que estoy trabajando con bootstrap, pero como primero debo hacer una consulta a base de datos para ver si la cedula ingresada esta registrada y si el horario en que ingreso si es en el que esta registrado debo mandar la ventana modal desde el control una vez haya pasado por las validaciones.
imprimo la ventana modal con un echo pero como es de class="modal" y no class="modal hide fade", después de abrirla no me permite cerrarla...
Mi pregunta puntual es ¿Hay alguna forma de pintar bonita la información de usuario que acaba de ingresar a la empresa? Ya que me parece feisimo en un alert y el alert de bootstra se queda en la parte superior o puedo cerrar mi ventana modal aunque sea de class="modal" .
Vaaaa agradezco mucho a las personas que se tomen el tiempo de leer es párrafo tan tedioso y a los que me puedan ayudar :*

[Javier01]

No conozco bootstrap, supongo que es algo para que se vea mas lindo, pero ¿No podrías hacerlo incluyendo ajax?
Sería algo como tener el modal, cuando se ingresan la cedula, pedir los datos, incluirlos en el modal, y mostrarlos.

[ik_fenix]

Iniciado por Javier01

No conozco bootstrap, supongo que es algo para que se vea mas lindo, pero ¿No podrías hacerlo incluyendo ajax?
Sería algo como tener el modal, cuando se ingresan la cedula, pedir los datos, incluirlos en el modal, y mostrarlos.

Siii eso, la cosa es que no se como llamar la modal desde código php.

[Javier01]

La idea que te propongo es, que al hacer clic en el botón “validar cedula”, en vez de cargar nuevamente la página,
Ejecute un javascript (ajax) que envíe esa cedula a un php; ese php valide esa cedula, y retorne los datos de la persona,
Desde el lado del javascript, obtienes los datos, los cargas con javascript en el modal, y lo muestras al usuario.
En caso de que el php no valide la cedula, no devolverías nada, y el javascript no cargaría el modal, simplemente mostraría un mensaje de error.
No se si puede hacer todo esto usando bootstrap, en caso de que si, y precises ayuda mas detallada para hacerlo, nos consultas.

[ik_fenix]

o.O
Hay Dios
Oye muchísimas gracias :$ Peor la verdad no creo que pueda hacer eso :(

[Javier01]

Pero no puedes porque el sistema no lo permite o porque no sabes hacerlo?
Creo que usar ajax suena más complicado de lo que es (o no explico demasiado bien).
Y si no se puede de esa forma, podrias postear el codigo que tienes, que seguramente se encuentre alguna forma de hacerlo.

Saludos!

[ik_fenix]

Porque lo que planeo es imprimir la ventana modal desde el control para que haga todo el recorrido de validaciones sin ningún problema:$, ya que son varias validaciones y tambien mas de dos ventanas modales :$ pero lo que necesito ahora es saber como cerrarla :$ porque después de hacer una serie de consultas imprimo la ventana modal, pero ya después no cierra.

public function crearregistro()
{
$sql = "SELECT Cedula
FROM tbl_empleado
WHERE Cedula=".$this->_emp;
$query = $this->_db->query($sql);
$row = mysql_fetch_array($query);
if($row!=NULL){

$sql = "SELECT Cedula,Nombre,Apellido,Foto
FROM tbl_empleado
WHERE Cedula = ".$this->_emp;
$query = $this->_db->query($sql);
$row = mysql_fetch_array($query);
$cedula = $row['Cedula'];
$nombre = $row['Nombre'];
$apellido = $row['Apellido'];
$foto = $row['Foto'];
?>
<input type="hidden" id="cedula" value="<?php echo $cedula;?>" />
<input type="hidden" id="nombre" value="<?php echo $nombre;?>" />
<input type="hidden" id="apellido" value="<?php echo $apellido;?>" />
<input type="hidden" id="foto" value="<?php echo $foto;?>" />
<script> alert("Se ingreso correctamente a "+document.getElementById('nombre').value+" "+document.getElementById('apellido').value+" Con cedula "+document.getElementById('cedula').value+" Con foto "+<img src="fotos/'.$valor['foto'].'" widht="50" height="50" >;</script>
<?php


echo '<div class="container">
<div class="modal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Empleado</h3>
</div>
<div class="modal-body">
<h4>Se ingreso correctamente a </h4>
<p>You can add some text here.</p>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="mymodal">Close</a>
</div>
</div> ';
...
}

[Javier01]

Por lo que estuve viendo de bootstrap, primero, para activar un modal cuando se cargue la página es simplemente colocando bajo el HTML del modal

Código Javascript:

$('#MyModal').modal({
  show: true 
})
 

O sea que usando el codigo de ejemplo de la pagina bootstrap quedaría:

Código HTML:

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div> 
<script language="javascript">
$('#MyModal').modal({
  show: true 
})
</script>
 

Luego, para ocultar un modal activo, simplemente debes ejecutar el script

Código Javascript:

<script language="javascript">
$('#myModal').modal('hide');
</script>
 

Ahora, si te interesa hacerlo con ajax, que tal vez te facilite algunas cosas seria asi:
Una pagina HTML que se mostraría al usuario con el formulario:
formulario.html

Código HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Cedula</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </head>
  <body>
 
 
 
<!-- Modal Cedula 1º Modal-->
<div id="ModalCI" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Ingrese la cedula</h3>
  </div>
  <div class="modal-body">
    <p><input type="text" id="cedula" name="cedula" value=""/></p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
     <button class="btn btn-primary" id="enviarCI" name="enviarCI">Enviar</button>
  </div>
</div>
 
<!-- Modal Datos  2º Modal-->
<div id="myModaldatos" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Datos</h3>
  </div>
  <div class="modal-body" id="bodymodaldatos" name="bodymodaldatos">
    <p></p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary" id="enviarCI" name="enviarCI">Enviar Cedula</button>
  </div>
</div>
 
<script>
 
$('#ModalCI').modal({
  show: true //Activo el modal en la carga de la pagina
})
 
$(document).ready(function() {    
    
    $('#enviarCI').click(function(){ //Si se hace click en enviar cedula
        $.ajax({
            type: "POST",
            url: "ajaxdatos.php", //Mando a ajaxdatos.php
            data: {cedula: $('#cedula').val()}, //La cedula
            success: function(data) {
                if(data != ''){ //Si ajaxdatos.php me devuelve algo
                    $('#ModalCI').modal('hide'); //oculto el modal de cedula
                    $('#bodymodaldatos').html(data); //Inserto los datos en el otro modal que tendrá los datos
                    $('#myModaldatos').modal('show'); //Muestro el modal de datos
                }else{ //si no me devuelve nada el ajaxdatos.php (porque no valido los datos)
                    alert('no hay registro'); //Muestro un alert
                }
            }
        });
    });              
});  
 
</script>
 
  </body>
</html>
 

Y una pagina php que devuelve los datos necesario y hace las validaciones:
ajaxdatos.php

Código PHP:

  <?php
if ( isset($_POST['cedula']) && $_POST['cedula'] == "12345678"){
?>
    <label>Nombre: Juan</label><br/>
    <label>Apellido: Perez</label><br/>
    <label>Cedula: 12345678</label><br/>
<?php
}
?>   

En el php colocas todo lo que tú quieras validar y devolver.
Yo lo hice bastante simple, pero puede incluir las conexiones a la BD y las validaciones. En este caso, solo validará si la cedula es 12345678

Saludos!

[ik_fenix]

hay muchisimas gracias lo voy a intentar
Por ultimo quería preguntar si se le puede poner un tiempo de muerta a la ventana modal.
Graciassss
:D