Foros del Web - Ver Mensaje Individual

Javier01 · #8 (**permalink**) 23/11/2012, 07:49

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:

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

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

Código HTML:

Ver original<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:

Ver original<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:

Ver original<!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!