Foros del Web » Programando para Internet » Jquery »

Crear modal con Twitter Bootstrap

Estas en el tema de Crear modal con Twitter Bootstrap en el foro de Jquery en Foros del Web. hola amigos del foro espero me puedan ayudar , me encuentro trabajando con Twitter Bootstrap nesito abrir 3 ventanas modales diferentes para abrir cada ventana ...
  #1 (permalink)  
Antiguo 17/10/2012, 10:45
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.853
Antigüedad: 13 años, 7 meses
Puntos: 6
Crear modal con Twitter Bootstrap

hola amigos del foro espero me puedan ayudar , me encuentro trabajando con
Twitter Bootstrap nesito abrir 3 ventanas modales diferentes para abrir cada ventana se espera que el usuario de un click sobre un boton para consultar , bonton modificar ,boton eliminar .


Código HTML:
Ver original
  1. <td><div class="btn-group" align="right">
  2. <a class="btn btn-primary" title="Consultar"><i class="icon-search icon-white" id="<? echo $field['id_destinatario'] ?>"></i></a>
  3. <a class="btn btn-primary" title="Modificar"><i class="icon-edit icon-white" id="<? echo $field['id_destinatario'] ?>"></i></a>
  4. <a class="btn btn-primary" title="Eliminar"><i class="icon-trash icon-white" id="<? echo $field['id_destinatario'] ?>"></i></a>
  5. </div></td>

ya logro saber que boton oprimio el usuario de la siguiente manera

Código Javascript:
Ver original
  1. $(document).ready(function(){
  2. $('.btn').live('click',function() {
  3.     var titulo = $(this).attr('title');
  4.     var idc=$(this).attr('id');
  5.     switch(titulo) {
  6.         case 'Consultar':
  7.         alert('boton Consultar')
  8.         break;
  9.         case 'Modificar':
  10.         alert('boton modificar');
  11.         break;
  12.     case 'Eliminar':
  13.         alert ('Boton eliminar');
  14.             break;
  15.     }
  16. });


Twitter Bootstrap se hace una ventana modal

Código HTML:
Ver original
  1. <a data-toggle="modal" class="btn btn-primary" href="#modalAdicionar"><i class="icon-user icon-white"></i>Abrir Modal</a>
  2.  
  3. <div id="modalAdicionar" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  4.             <div class="modal-header">
  5.               <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  6.               <h3 id="myModalLabel">Adicionar Nuevo Destinatario</h3>
  7.             </div>
  8.             <div class="modal-body">
  9. <div class="modal-footer">
  10.               <button class="btn" data-dismiss="modal">Cancelar</button>
  11.               <button class="btn btn-primary">Guardar</button>
  12.             </div>
  13.             </div>
  #2 (permalink)  
Antiguo 17/10/2012, 13:20
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.853
Antigüedad: 13 años, 7 meses
Puntos: 6
Respuesta: Crear modal con Twitter Bootstrap

amigos lo solucione tenia un error

lo tenia asi (id) i
<a class="btn btn-primary" title="Consultar"><i class="icon-search icon-white" id="<? echo $field['id_destinatario'] ?>"></i></a>

y deberia ser asi id del a
<a data-toggle="modal" class="btn btn-primary" title="Consultar" id="<? echo $field['id_destinatario'] ?>"><i class="icon-search icon-white"></i></a>


Código Javascript:
Ver original
  1. case 'Eliminar':
  2.         $(function ()
  3.          { $("#modal-eliminar").modal();  
  4.                   $.ajax({
  5.                   url:'views/consultar.php',
  6.                   type:'post',
  7.                   data:'id='+idc,
  8.                   }).done(function(data) {
  9.                   $("#consulta").html(data);
  10. });
  11.         });
  12. break;

Última edición por Montes28; 17/10/2012 a las 15:22

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:12.