Tema: Crear modal box con jquery y efecto fade in/out
Ver Mensaje Individual
  #9 (permalink)  
Antiguo 22/03/2010, 13:48
Avatar de neodani
neodani
 
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 1 mes
Puntos: 20
Respuesta: Crear modal box con jquery y efecto fade in/out
Cita:
Iniciado por mayid Ver Mensaje
Bueno, para empezar veamos esto:
http://www.forosdelweb.com/f127/nega...jquery-781392/

Ahí hay un codigo que publicó Dany para utilizar :not
Buenas,

La primera duda que me sale al ver el ejemplo, es si el código tiene que ir obligatoriamente abajo de la página :S

Luego lo he probado de distintas maneras pero cuando abre la ventana se desaparece, no espera a que haga click, cosa que me desconcierta porque tengo puesto el evento click

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

Necesito una mano con la propiedad :not

Muchas gracias!