Tema: Crear modal box con jquery y efecto fade in/out
Ver Mensaje Individual
  #5 (permalink)  
Antiguo 21/03/2010, 12:54
Avatar de neodani
neodani
 
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 9 meses
Puntos: 20
Respuesta: Crear modal box con jquery y efecto fade in/out
Buenas,

Encontré un ejemplo más sencillo de implementar, funciona correctamente. Se abre el modal al pulsar el boton/enlace y no se cierra hasta que no pulsas el boton cerrar.

Quiero añadirle la funcionalidad de que si pulsan fuera del modal también se cierre igual que si pulsase el boton cerrar.

Pensaba que agregando las lineas comentadas tendría bastante, pero lo que consigo es que una vez se abre el modal se cierra automáticamente sin esperar respuesta del usuario :S

Código completo
Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>Modal Box With jQuery</title>
  6. <style type="text/css">
  7. body {
  8.     background:#fff;
  9.     font-family:Verdana, Arial, Helvetica, sans-serif;
  10.     color:white;
  11. }
  12.  
  13. a:link, a:visited, a:active {
  14.     background:red;
  15.     color:white;
  16.     text-decoration:none;
  17.     padding:3px;
  18. }
  19.  
  20. a:hover {
  21.     background:white;
  22.     color:red;
  23. }
  24.  
  25. #darken {
  26.     position:absolute;
  27.     top:0;
  28.     left:0;
  29.     width:100%;
  30.     height:100%;
  31.     display:none;
  32.     z-index:199;
  33.     background:black;
  34.     opacity:.5;
  35.     filter:Alpha(opacity=50); /* Transparency in IE */
  36. }
  37.  
  38. #modalBox {
  39.     position:absolute;
  40.     top:50%;
  41.     left:50%;
  42.     width:400px;
  43.     height:300px;
  44.     margin-left:-200px;
  45.     margin-top:-200px;
  46.     border:#ccc 10px solid;
  47.     padding:10px;
  48.     display:none;
  49.     background:white;
  50.     font-size:12px;
  51.     color:black;
  52.     z-index:200;
  53. }
  54. </style>
  55. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
  56. <script type="text/javascript">
  57. $(function(){
  58.     $('#open').click(function(){
  59.         $('#darken').fadeIn('500');
  60.         $('#modalBox').fadeIn('500');
  61.     });
  62.  
  63.     $('#close').click(function(){
  64.         $('#modalBox').fadeOut('500');
  65.         $('#darken').fadeOut('500');
  66.     });
  67.     
  68.     /*$("body").click(function(){
  69.         $('#modalBox').fadeOut('500');
  70.         $('#darken').fadeOut('500');
  71.     });*/
  72.  
  73. });
  74. </script>
  75. </head>
  76.  
  77. <body>
  78.     <a href="#" id="open">Open modalBox</a>
  79.     <div id="modalBox">
  80.         <p>Donec porta magna ac quam. Sed mollis. Nunc ultricies commodo neque. Aliquam dapibus. Nulla gravida interdum tortor. In arcu. Pellentesque eu quam. Donec aliquam iaculis urna. Maecenas vel orci quis arcu vulputate cursus. Quisque lectus. Fusce ultricies orci at quam. Sed ut augue. </p>
  81.         <img src="http://path/to/some/image.jpg" alt="some image" />
  82.         <p><a href="#" id="close">Close modalBox</a></p>
  83.     </div><!-- end modalBox -->
  84.     <div id="darken"></div><!-- end darken -->
  85. </body>
  86.  
  87. </html>

¿Sabéis que me falta para conseguirlo?

Muchas gracias de antemano!