Tema: Crear modal box con jquery y efecto fade in/out
Ver Mensaje Individual
  #11 (permalink)  
Antiguo 22/03/2010, 14:35
Avatar de neodani
neodani
 
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 10 meses
Puntos: 20
Respuesta: Crear modal box con jquery y efecto fade in/out
Cita:
Iniciado por mayid Ver Mensaje
Esto debe ir dentro de document.ready, junto con las demas asignaciones de click.
Lo probé como me indicaste pero no funcionó :S me sucedia el mismo efecto, se abría y se cerraba al instante.

Encontré una manera alternativa

$('#darken').click(function () {
$('#darken').fadeOut('500');
$('#modalBox').fadeOut('500');
});

Dejo el código completo por si alguien lo quiere usar en FF va bien...

Sin embargo, un detalle, cuando lo abro con IE me muestra el fondo totalmente negro!! no hace la transparencia. ¿Por qué ocurre?

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.     $('#darken').click(function () {
  69.         $('#darken').fadeOut('500');
  70.         $('#modalBox').fadeOut('500');
  71.     });
  72. });
  73. </script>
  74. </head>
  75.  
  76. <body>
  77.     <a href="#" id="open">Open modalBox</a>
  78.     <div id="modalBox">
  79.         <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>
  80.         <img src="http://path/to/some/image.jpg" alt="some image" />
  81.         <p><a href="#" id="close">Close modalBox</a></p>
  82.     </div><!-- end modalBox -->
  83.     <div id="darken"></div><!-- end darken -->
  84. </body>
  85.  
  86. </html>

Muchas gracias de antemano!