Foros del Web » Programando para Internet » Jquery »

Crear modal box con jquery y efecto fade in/out

Estas en el tema de Crear modal box con jquery y efecto fade in/out en el foro de Jquery en Foros del Web. Buenas, No he logrado crear el efecto fade in / fade out de un modal box, he leido este post de otro compañero, pero no ...
  #1 (permalink)  
Antiguo 17/03/2010, 16:12
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 9 meses
Puntos: 20
Crear modal box con jquery y efecto fade in/out

Buenas,

No he logrado crear el efecto fade in / fade out de un modal box, he leido este post de otro compañero, pero no he sabido adaptarlo
http://www.forosdelweb.com/f127/jque...de-out-743085/

El código de ejemplo que estaba utilizando es el siguiente, muy conocido...

Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <title> SimpleModal Basic Modal Dialog </title>
  3. <meta name='author' content='Eric Martin' />
  4. <meta name='copyright' content='2010 - Eric Martin' />
  5.  
  6. <!-- Contact Form CSS files -->
  7. <link type='text/css' href='css/basic.css' rel='stylesheet' media='screen' />
  8.  
  9. <!-- IE 6 "fixes" -->
  10. <!--[if lt IE 7]>
  11. <link type='text/css' href='css/basic_ie.css' rel='stylesheet' media='screen' />
  12. <![endif]-->
  13.  
  14. <!-- JS files are loaded at the bottom of the page -->
  15. </head>
  16. <div id='basic-modal'><h2>Basic Modal Dialog</h2>
  17. <p>A basic modal dialog with minimal styling and without any additional settings. There are a few CSS attributes set internally by SimpleModal, however, SimpleModal relies mostly on external CSS for the look and feel.</p>
  18. <input type='button' name='basic' value='Demo' class='basic demo'/> or <a href='#' class='basic'>Demo</a>
  19. </div>
  20. <div id="basic-modal-content">
  21.     <h3>Basic Modal Dialog</h3>
  22.     <p>For this demo, SimpleModal is using this "hidden" data for its content. You can also populate the modal dialog with standard HTML or with DOM element(s).</p>
  23.     <p>Examples:</p>
  24.     <p><code>$('#basicModalContent').modal(); // jQuery object; this demo</code></p>
  25.     <p><code>$.modal(document.getElementById('basicModalContent')); // DOM</code></p>
  26.     <p><code>$.modal('&lt;p&gt;&lt;b&gt;HTML&lt;/b&gt; elements&lt;/p&gt;'); // HTML</code></p>
  27.  
  28.     <p><a href='http://www.ericmmartin.com/projects/simplemodal/'>More details...</a></p>
  29. </div>
  30. <!-- Load jQuery, SimpleModal and Basic JS files -->
  31. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
  32. <script type='text/javascript' src='js/jquery.simplemodal.js'></script>
  33. <script type='text/javascript' src='js/basic.js'></script>
  34. </body>
  35. </html>

Se puede encontrar en
http://www.ericmmartin.com/projects/simplemodal-demos/
Apartado Basic Modal Dialog
Enlace de descarga directo

Qué tendría que modificar para conseguir el efecto fade in y fade out en ese modal box?

Debería modificar exclusivamente el codigo basic.js que actualmente tiene esto?

Código Javascript:
Ver original
  1. jQuery(function ($) {
  2.     $('#basic-modal input.basic, #basic-modal a.basic').click(function (e) {
  3.         e.preventDefault();
  4.         $('#basic-modal-content').modal();
  5.     });
  6. });

Muchas gracias de antemano!
  #2 (permalink)  
Antiguo 17/03/2010, 16:39
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 8 meses
Puntos: 101
Respuesta: Crear modal box con jquery y efecto fade in/out

Desconocía completamente la etiqueta <code>...

Me gustaría saber si el codigo funciona, y si lo unico que necesitas es el fade.
  #3 (permalink)  
Antiguo 18/03/2010, 00:42
Avatar de 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

Cita:
Iniciado por mayid Ver Mensaje
Desconocía completamente la etiqueta <code>...

Me gustaría saber si el codigo funciona, y si lo unico que necesitas es el fade.
Así es mayid, el código completo funciona, cuando pulsas el boton o el enlace

<input type='button' name='basic' value='Demo' class='basic demo'/> or <a href='#' class='basic'>Demo</a>

Te abre el modal box, pero sin ningun efecto. Estuve leyendo el post anterior pero no conseguí sacarlo.

¿Sabes como hacer el efecto fade in cuando aparezca la venta y el fade out cuando desaparece?

Muchas gracias de antemano!
  #4 (permalink)  
Antiguo 18/03/2010, 08:10
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 8 meses
Puntos: 101
Respuesta: Crear modal box con jquery y efecto fade in/out

Tendrías que abrir este archivo: js/jquery.simplemodal.js

Luego, buscar en donde diga show() y hide() y reemplazar eso por el efecto que vos queres lograr.
  #5 (permalink)  
Antiguo 21/03/2010, 12:54
Avatar de 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. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  4. <title>Modal Box With jQuery</title>
  5. <style type="text/css">
  6. body {
  7.     background:#fff;
  8.     font-family:Verdana, Arial, Helvetica, sans-serif;
  9.     color:white;
  10. }
  11.  
  12. a:link, a:visited, a:active {
  13.     background:red;
  14.     color:white;
  15.     text-decoration:none;
  16.     padding:3px;
  17. }
  18.  
  19. a:hover {
  20.     background:white;
  21.     color:red;
  22. }
  23.  
  24. #darken {
  25.     position:absolute;
  26.     top:0;
  27.     left:0;
  28.     width:100%;
  29.     height:100%;
  30.     display:none;
  31.     z-index:199;
  32.     background:black;
  33.     opacity:.5;
  34.     filter:Alpha(opacity=50); /* Transparency in IE */
  35. }
  36.  
  37. #modalBox {
  38.     position:absolute;
  39.     top:50%;
  40.     left:50%;
  41.     width:400px;
  42.     height:300px;
  43.     margin-left:-200px;
  44.     margin-top:-200px;
  45.     border:#ccc 10px solid;
  46.     padding:10px;
  47.     display:none;
  48.     background:white;
  49.     font-size:12px;
  50.     color:black;
  51.     z-index:200;
  52. }
  53. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
  54. <script type="text/javascript">
  55. $(function(){
  56.     $('#open').click(function(){
  57.         $('#darken').fadeIn('500');
  58.         $('#modalBox').fadeIn('500');
  59.     });
  60.  
  61.     $('#close').click(function(){
  62.         $('#modalBox').fadeOut('500');
  63.         $('#darken').fadeOut('500');
  64.     });
  65.    
  66.     /*$("body").click(function(){
  67.         $('#modalBox').fadeOut('500');
  68.         $('#darken').fadeOut('500');
  69.     });*/
  70.  
  71. });
  72. </head>
  73.  
  74.     <a href="#" id="open">Open modalBox</a>
  75.     <div id="modalBox">
  76.         <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>
  77.         <img src="http://path/to/some/image.jpg" alt="some image" />
  78.         <p><a href="#" id="close">Close modalBox</a></p>
  79.     </div><!-- end modalBox -->
  80.     <div id="darken"></div><!-- end darken -->
  81. </body>
  82.  
  83. </html>

¿Sabéis que me falta para conseguirlo?

Muchas gracias de antemano!
  #6 (permalink)  
Antiguo 21/03/2010, 12:58
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 8 meses
Puntos: 101
Respuesta: Crear modal box con jquery y efecto fade in/out

Creo que en ese caso tendrías que usar el selector [not]. Pero no sabría como implementarlo.

En pseudo codigo:

- cuando hagas click en cualquier lugar que no sea el box (:not), cerrá la ventana.
  #7 (permalink)  
Antiguo 21/03/2010, 13:18
Avatar de 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

Cita:
Iniciado por mayid Ver Mensaje
Creo que en ese caso tendrías que usar el selector [not]. Pero no sabría como implementarlo.

En pseudo codigo:

- cuando hagas click en cualquier lugar que no sea el box (:not), cerrá la ventana.
Y si te doy una idea... como por ejemplo que al mostrar la ventana modal apareciese una capa de background de toda la ventana que al pulsar en ella provocase el efecto de cerrarse?

Es factible? sabrías sacarlo así? :D

Mil gracias mayid, ya te debo un par de cervezas!
  #8 (permalink)  
Antiguo 21/03/2010, 16:19
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 8 meses
Puntos: 101
Respuesta: Crear modal box con jquery y efecto fade in/out

Bueno, para empezar veamos esto:
http://www.forosdelweb.com/f127/nega...jquery-781392/

Ahí hay un codigo que publicó Dany para utilizar :not
  #9 (permalink)  
Antiguo 22/03/2010, 13:48
Avatar de 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

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. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  4. <title>Modal Box With jQuery</title>
  5. <style type="text/css">
  6. body {
  7.     background:#fff;
  8.     font-family:Verdana, Arial, Helvetica, sans-serif;
  9.     color:white;
  10. }
  11.  
  12. a:link, a:visited, a:active {
  13.     background:red;
  14.     color:white;
  15.     text-decoration:none;
  16.     padding:3px;
  17. }
  18.  
  19. a:hover {
  20.     background:white;
  21.     color:red;
  22. }
  23.  
  24. #darken {
  25.     position:absolute;
  26.     top:0;
  27.     left:0;
  28.     width:100%;
  29.     height:100%;
  30.     display:none;
  31.     z-index:199;
  32.     background:black;
  33.     opacity:.5;
  34.     filter:Alpha(opacity=50); /* Transparency in IE */
  35. }
  36.  
  37. #modalBox {
  38.     position:absolute;
  39.     top:50%;
  40.     left:50%;
  41.     width:400px;
  42.     height:300px;
  43.     margin-left:-200px;
  44.     margin-top:-200px;
  45.     border:#ccc 10px solid;
  46.     padding:10px;
  47.     display:none;
  48.     background:white;
  49.     font-size:12px;
  50.     color:black;
  51.     z-index:200;
  52. }
  53. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
  54. <script type="text/javascript">
  55. $(function(){
  56.     $('#open').click(function(){
  57.         $('#darken').fadeIn('500');
  58.         $('#modalBox').fadeIn('500');
  59.     });
  60.  
  61.     $('#close').click(function(){
  62.         $('#modalBox').fadeOut('500');
  63.         $('#darken').fadeOut('500');
  64.     });
  65.  
  66. });
  67. </head>
  68.  
  69.     <a href="#" id="open">Open modalBox</a>
  70.     <div id="modalBox">
  71.         <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>
  72.         <img src="http://path/to/some/image.jpg" alt="some image" />
  73.         <p><a href="#" id="close">Close modalBox</a></p>
  74.     </div><!-- end modalBox -->
  75.     <div id="darken"></div><!-- end darken -->
  76.   $(":not(#modalBox)").click(function(){
  77.         $('#modalBox').fadeOut('500');
  78.         $('#darken').fadeOut('500');
  79.     });
  80. </body>

Necesito una mano con la propiedad :not

Muchas gracias!
  #10 (permalink)  
Antiguo 22/03/2010, 14:25
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 8 meses
Puntos: 101
Respuesta: Crear modal box con jquery y efecto fade in/out

Cita:
$(":not(#modalBox)").click(function(){
$('#modalBox').fadeOut('500');
$('#darken').fadeOut('500');
});
Esto debe ir dentro de document.ready, junto con las demas asignaciones de click.
  #11 (permalink)  
Antiguo 22/03/2010, 14:35
Avatar de 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

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. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  4. <title>Modal Box With jQuery</title>
  5. <style type="text/css">
  6. body {
  7.     background:#fff;
  8.     font-family:Verdana, Arial, Helvetica, sans-serif;
  9.     color:white;
  10. }
  11.  
  12. a:link, a:visited, a:active {
  13.     background:red;
  14.     color:white;
  15.     text-decoration:none;
  16.     padding:3px;
  17. }
  18.  
  19. a:hover {
  20.     background:white;
  21.     color:red;
  22. }
  23.  
  24. #darken {
  25.     position:absolute;
  26.     top:0;
  27.     left:0;
  28.     width:100%;
  29.     height:100%;
  30.     display:none;
  31.     z-index:199;
  32.     background:black;
  33.     opacity:.5;
  34.     filter:Alpha(opacity=50); /* Transparency in IE */
  35. }
  36.  
  37. #modalBox {
  38.     position:absolute;
  39.     top:50%;
  40.     left:50%;
  41.     width:400px;
  42.     height:300px;
  43.     margin-left:-200px;
  44.     margin-top:-200px;
  45.     border:#ccc 10px solid;
  46.     padding:10px;
  47.     display:none;
  48.     background:white;
  49.     font-size:12px;
  50.     color:black;
  51.     z-index:200;
  52. }
  53. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
  54. <script type="text/javascript">
  55. $(function(){
  56.     $('#open').click(function(){
  57.         $('#darken').fadeIn('500');
  58.         $('#modalBox').fadeIn('500');
  59.     });
  60.  
  61.     $('#close').click(function(){
  62.         $('#modalBox').fadeOut('500');
  63.         $('#darken').fadeOut('500');
  64.     });
  65.    
  66.     $('#darken').click(function () {
  67.         $('#darken').fadeOut('500');
  68.         $('#modalBox').fadeOut('500');
  69.     });
  70. });
  71. </head>
  72.  
  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. </body>
  81.  
  82. </html>

Muchas gracias de antemano!
  #12 (permalink)  
Antiguo 22/03/2010, 15:14
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 8 meses
Puntos: 101
Respuesta: Crear modal box con jquery y efecto fade in/out

Cita:
$('#darken').fadeIn('500');
$('#modalBox').fadeIn('500');
Modal box no hace la transparencia por si mismo? Ah! No estas usando un plugin sino algo que vos compusiste. Ya veo.
  #13 (permalink)  
Antiguo 22/03/2010, 15:26
Avatar de 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

Cita:
Iniciado por mayid Ver Mensaje
Modal box no hace la transparencia por si mismo? Ah! No estas usando un plugin sino algo que vos compusiste. Ya veo.
Es muy dificil conseguirlo sin plugins externos? es que todos los que he visto ocupan bastante, y para el efecto que es pensaba que con pocas lineas y vuestra ayuda podría conseguirlo...

Se te ocurre cómo mayid? qué le falta para que funcione bien en IE?

Muchas gracias
  #14 (permalink)  
Antiguo 22/03/2010, 15:51
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 8 meses
Puntos: 101
Respuesta: Crear modal box con jquery y efecto fade in/out

FadaIn / out sirven para ir de nada a todo y viceversa. Si lo que queres es transparencia, juga con la opacidad:

$('#book').fadeTo('slow', 0.5)

FadeTo: http://api.jquery.com/fadeTo/

(los valores van de 0 a 1).
  #15 (permalink)  
Antiguo 23/03/2010, 00:41
Avatar de 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

Cita:
Iniciado por mayid Ver Mensaje
FadaIn / out sirven para ir de nada a todo y viceversa. Si lo que queres es transparencia, juga con la opacidad:

$('#book').fadeTo('slow', 0.5)

FadeTo: http://api.jquery.com/fadeTo/

(los valores van de 0 a 1).
No lo consigo en FF funciona en IE no.

<script type="text/javascript">
$(function(){
$('#open').click(function(){
$('#darken').fadeIn('500');
$('#modalBox').fadeIn('500');
});

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

$('#darken').click(function () {
$('#darken').fadeOut('500');
$('#modalBox').fadeOut('500');
$('#modalBox').fadeTo('slow', 0.5);
});
});
</script>

Me echáis una manita?

Gracias de antemano
  #16 (permalink)  
Antiguo 23/03/2010, 12:28
Avatar de 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

He conseguido rescatar el código de un compañero del foro deirdre, que hace con jquery lo que buscábamos, y funciona tanto en IE como en FF. Muchas gracias deirdre.

http://www.forosdelweb.com/f77/conse...howbox-734261/

El código adaptado al ejemplo que os quiero mostrar es el siguiente:

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.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  4.     <title>Popup suave</title>
  5.     <link rel="stylesheet" href="css/estilo.css" type="text/css" media="screen" />
  6. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
  7.  
  8. <script type="text/javascript">
  9.     var popupStatus = 0;
  10.     function loadPopup() {
  11.     if (popupStatus == 0) {
  12.         $("#backgroundPopup").css({
  13.             "opacity": "0.7"
  14.         });
  15.         $("#backgroundPopup").fadeIn("slow");
  16.         $("#popupContact").fadeIn("slow");
  17.         popupStatus = 1;
  18.     }
  19. };
  20.  
  21. function disablePopup() {
  22.     if (popupStatus == 1) {
  23.         $("#backgroundPopup").fadeOut("slow");
  24.         $("#popupContact").fadeOut("slow");
  25.         popupStatus = 0;
  26.     }
  27. };
  28.  
  29. function centerPopup() {
  30.     var windowWidth = document.documentElement.clientWidth;
  31.     var windowHeight = document.documentElement.clientHeight;
  32.     var popupHeight = $("#popupContact").height();
  33.     var popupWidth = $("#popupContact").width();
  34.     $("#popupContact").css({
  35.         "position": "absolute",
  36.         "top": windowHeight / 2 - popupHeight / 2,
  37.         //"top": 10,
  38.         "left": windowWidth / 2 - popupWidth / 2
  39.     });
  40.     $("#backgroundPopup").css({
  41.         "height": windowHeight
  42.     });
  43. };
  44. $(document).ready(function () {
  45.     $("#button").click(function () {
  46.         centerPopup();
  47.         loadPopup();
  48.     });
  49.     $("#popupContactClose").click(function () {
  50.         disablePopup();
  51.     });
  52.     $("#backgroundPopup").click(function () {
  53.         disablePopup();
  54.     });
  55.     $(document).keypress(function (e) {
  56.         if (e.keyCode == 27 && popupStatus == 1) {
  57.            disablePopup();
  58.         }
  59.     });
  60. });
  61. </head>
  62.     <div id="cab">
  63.         <p>Linea 1</p><br/><p>Linea 2</p><br/><p>Linea 3</p><br/><p>Linea 4</p><br/><p>Linea 5</p><br/><p>Linea 6</p><br/><p>Linea 7</p><br/><p>Linea 8</p><br/><p>Linea 9</p><br/><p>Linea 10</p><br/>
  64.         <p>Linea 1</p><br/><p>Linea 2</p><br/><p>Linea 3</p><br/><p>Linea 4</p><br/><p>Linea 5</p><br/><p>Linea 6</p><br/><p>Linea 7</p><br/><p>Linea 8</p><br/><p>Linea 9</p><br/><p>Linea 10</p><br/>
  65.         <p>Linea 1</p><br/><p>Linea 2</p><br/><p>Linea 3</p><br/><p>Linea 4</p><br/><p>Linea 5</p><br/><p>Linea 6</p><br/><p>Linea 7</p><br/><p>Linea 8</p><br/><p>Linea 9</p><br/><p>Linea 10</p><br/>
  66.         <p>Linea 1</p><br/><p>Linea 2</p><br/><p>Linea 3</p><br/><p>Linea 4</p><br/><p>Linea 5</p><br/><p>Linea 6</p><br/><p>Linea 7</p><br/><p>Linea 8</p><br/><p>Linea 9</p><br/><p>Linea 10</p><br/>
  67.        
  68.         <div id="button">ABRIR MODAL BOX</div>
  69.     </div>
  70.    
  71.     <div id="popupContact">
  72.         <a id="popupContactClose">x</a>
  73.         <h1>Contacto</h1>
  74.         <p>Envíenos su opinión, la tendremos en cuenta. Gracias</p>
  75.         <div id="main_content_single">
  76.         <form method="post" action="contact.php">
  77.                 <label>Nombre:</label>
  78.                 <input class="textfield" type="text" name="nombre" maxlength="64" value="" />
  79.                 <label>E-mail:</label>
  80.                 <input class="textfield" type="text" name="email" maxlength="64" value="" />
  81.                 <label>Mensaje:</label>
  82.                 <textarea class="textarea" name="opinion" rows="8"></textarea>
  83.             <button type="submit" class="button">ENVIAR</button>
  84.         </form>
  85.         </div>
  86.     </div>
  87.     <div id="backgroundPopup"></div>
  88.     <p>Deirdre para Foros del Web</p>
  89. </body>
  90. </html>

Estilo css

Código CSS:
Ver original
  1. /* reset */
  2.  
  3. html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
  4. font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
  5. tfoot, thead, tr, th, td {
  6.     border: 0pt none;
  7.     font-family: inherit;
  8.     font-size: 100%;
  9.     font-style: inherit;
  10.     font-weight: inherit;
  11.     margin: 0;
  12.     padding: 0;
  13.     vertical-align: baseline;
  14. }
  15.  
  16. /* fin reset */
  17.  
  18. body {
  19.     background: #fff none repeat scroll 0%;
  20.     line-height: 1;
  21.     font-size: 12px;
  22.     font-family: arial,sans-serif;
  23.     margin: 0;
  24.     height: 100%;
  25. }
  26. a {
  27.     cursor: pointer;
  28.     text-decoration:none;
  29. }
  30. br.both{
  31.     clear:both;
  32. }
  33. #backgroundPopup{
  34.     display: none;
  35.     position: fixed;
  36.     _position: absolute; /* necesario para internet explorer 6 */
  37.     height: 100%;
  38.     width: 100%;
  39.     top: 0;
  40.     left: 0;
  41.     background: #ccc;
  42.     border: 1px solid #cecece;
  43.     z-index: 1;
  44. }
  45. #popupContact{
  46.     display: none;
  47.     position: fixed;
  48.     _position: absolute; /* necesario para internet explorer 6*/
  49.     width: 420px;
  50.     height: 370px;
  51.     background: #FFFFFF;
  52.     border: 12px solid #cecece;
  53.     z-index: 2;
  54.     padding: 12px;
  55.     font-size: 13px;
  56. }
  57. #popupContact h1{
  58.     text-align: left;
  59.     color: #800000;
  60.     font-size: 22px;
  61.     font-weight: 700;
  62.     border-bottom: 1px solid #D3D3D3;
  63.     padding-bottom: 2px;
  64.     margin-bottom: 20px;
  65. }
  66. #popupContactClose {
  67.     font-size: 14px;
  68.     line-height: 14px;
  69.     right: 6px;
  70.     top: 4px;
  71.     position: absolute;
  72.     color: #800000;
  73.     font-weight: 700;
  74.     display: block;
  75. }
  76. .button{
  77.     text-align: center;
  78.     font-size: 11px;
  79. }
  80. #button{
  81.     text-align: center;
  82.     font-size: 13px;
  83.     cursor: pointer;
  84.     width: 100px;
  85.     margin: 0 auto;
  86.     margin-top: 10px;
  87. }
  88. .textfield {
  89.     margin-bottom: 15px;
  90.     background-color: #ccc;
  91.     color: #484848;
  92.     border: 1px solid #383838;
  93.     padding: 4px 3px;
  94.     font-size: 0.9em;
  95.     width: 360px;
  96. }
  97. #main_content_single {
  98.     font-size: 1.0em;
  99.     color: #484848;
  100.     margin: 5px 40px 5px 0;
  101.     line-height: 1.5em;
  102. }
  103. .textarea {
  104.     width: 360px;
  105.     font-family: Arial, Verdana, Tahoma, Geneva, sans-serif;
  106.     font-size: 0.9em;
  107.     background-color: #ccc;
  108.     color: #484848;
  109.     border: 1px solid #383838;
  110.     padding: 4px 3px;  
  111. }
  112. #grafico {
  113.     width: 200px;
  114.     height: 200px;
  115.     background-image:url('../image/noentiendo.png');
  116.     border-bottom: 2px solid #484848;
  117.     margin: 0 auto;
  118. }
  119. #cab {
  120.     width: 100%;
  121.     text-align: center;
  122.     margin-top: 20px;
  123. }

El problema es que no centra la ventana MODAL en mitad de la pantalla, sino que cuenta al parecer los pixels de la ventana del navegador y lo ajusta a ese tamaño. Esto es un problema porque si el tamaño real de la página es mas largo, cuando se abre la ventana queda arriba del todo.

¿Alguna idea?

Muchas gracias de antemano!
  #17 (permalink)  
Antiguo 23/03/2010, 12:53
Avatar de 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

Cita:
Iniciado por neodani Ver Mensaje
El problema es que no centra la ventana MODAL en mitad de la pantalla, sino que cuenta al parecer los pixels de la ventana del navegador y lo ajusta a ese tamaño. Esto es un problema porque si el tamaño real de la página es mas largo, cuando se abre la ventana queda arriba del todo.

¿Alguna idea?
No es fácil al tratarse de una ventana modal que aparece por encima del resto de elementos. Las técnicas habituales no funcionan :S:S

Código CSS:
Ver original
  1. top: 50%; /*Lo colocamos al 50% de la pantalla en vertical*/
  2. left: 50%; /*Lo colocamos al 50% de la pantalla en horizontal*/
  3. margin-top: -185px; /*le restamos la mitad del valor de height para centrarla*/
  4. margin-left: -210px; /*le restamos la mitad del valor de width para centrarla*
  #18 (permalink)  
Antiguo 23/03/2010, 13:04
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 8 meses
Puntos: 101
Respuesta: Crear modal box con jquery y efecto fade in/out

Cita:
$("#backgroundPopup").css({
"opacity": "0.7"
});
Mira vos, una alternativa al fadeTo().

Cita:
$("#popupContact").css({
"position": "absolute",
"top": windowHeight / 2 - popupHeight / 2,
//"top": 10,
"left": windowWidth / 2 - popupWidth / 2
});
Aca esta presente la ecuación que vos planteabas en CSS. No? Que falta ajustar ahora? El alto o el ancho?
  #19 (permalink)  
Antiguo 23/03/2010, 13:18
Avatar de 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

Conseguido

Se tiene que modificar del css anterior esta propiedad

Código CSS:
Ver original
  1. #popupContact{
  2.     display: none;
  3.     position: fixed;
  4.     _position: fixed; /* necesario para internet explorer 6*/
  5.     width: 420px;
  6.     height: 370px;
  7.     margin-top: -195px;
  8.     margin-left: -210px;
  9.     top: 50&#37;;
  10.     left: 50%;
  11.     background: #FFFFFF;
  12.     border: 12px solid #cecece;
  13.     z-index: 2;
  14.     padding: 12px;
  15.     font-size: 13px;
  16. }

Podemos eliminar la función, ya que se realiza desde el css

Código Javascript:
Ver original
  1. function centerPopup() {
  2.     var windowWidth = document.documentElement.clientWidth;
  3.     var windowHeight = document.documentElement.clientHeight;
  4.     var popupHeight = $("#popupContact").height();
  5.     var popupWidth = $("#popupContact").width();
  6.     /*$("#popupContact").css({
  7.         "position": "fixed",
  8.         "top": windowHeight / 2 - popupHeight / 2,
  9.         "left": windowWidth / 2 - popupWidth / 2
  10.     });*/
  11.     $("#backgroundPopup").css({
  12.         "height": windowHeight
  13.     });
  14. };

Ojo con la linea donde se llama
centerPopup();

Lo que falta ahora mayid, es disponer de dos botones distintos, y que los dos abrán una pop-up distinta. Reutilizando el código... a ver de que manera, porque no lo veo.

Es posible que tengamos que definir una especie de función a la cual se le pase el ID de la modal que queremos abrir?

Casi lo tenemos :P

Saludos!
  #20 (permalink)  
Antiguo 16/03/2012, 05:17
 
Fecha de Ingreso: abril-2008
Mensajes: 4
Antigüedad: 16 años, 8 meses
Puntos: 0
Respuesta: Crear modal box con jquery y efecto fade in/out

Hola muy bueno el tutolo estoy probando pero se me abre detrás de los divs. Es incompatible con otro jquery que tengo instalado como el pretyfoto?

Etiquetas: box, efecto, fade, modal
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 13:35.