Foros del Web » Programando para Internet » Jquery »

Abrir 2 o mas modal box distintas con Jquery

 Estas en el tema de Abrir 2 o mas modal box distintas con Jquery en el foro de Jquery en Foros del Web. Buenas, No consigo lograr definir diferentes botones en una pagina que abran diferentes modal box, no se como decirle que me abra otra distinta sin ...
  #1 (permalink)  
Antiguo 05/04/2010, 15:06
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 1 mes
Puntos: 20
Abrir 2 o mas modal box distintas con Jquery
Buenas,

No consigo lograr definir diferentes botones en una pagina que abran diferentes modal box, no se como decirle que me abra otra distinta sin tener que repetir código por cada modal diferente que quiera abrir.

ejemplo.php
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>Intento de 2 modal box</title>
  6.     <link rel="stylesheet" href="estilo.css" type="text/css" media="screen" />
  7. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
  8.  
  9. <script type="text/javascript"> 
  10.     var popupStatus = 0;
  11.     function loadPopup() {
  12.     if (popupStatus == 0) {
  13.         $("#backgroundPopup").css({
  14.             "opacity": "0.7"
  15.         });
  16.         $("#backgroundPopup").fadeIn("slow");
  17.         $("#popupContact1").fadeIn("slow");
  18.         popupStatus = 1;
  19.     }
  20. };
  21.  
  22. function disablePopup() {
  23.     if (popupStatus == 1) {
  24.         $("#backgroundPopup").fadeOut("slow");
  25.         $("#popupContact1").fadeOut("slow");
  26.         popupStatus = 0;
  27.     }
  28. };
  29.  
  30. $(document).ready(function () {
  31.     $("#button1").click(function () {
  32.         loadPopup();
  33.     });
  34.     $("#button2").click(function () {
  35.         loadPopup();
  36.     });
  37.     $("#popupContactClose").click(function () {
  38.         disablePopup();
  39.     });
  40.     $("#backgroundPopup").click(function () {
  41.         disablePopup();
  42.     });
  43.     $(document).keypress(function (e) {
  44.         if (e.keyCode == 27 && popupStatus == 1) {
  45.             disablePopup();
  46.         }
  47.     });
  48. });
  49. </script>
  50. </head>
  51. <body>
  52.         
  53.     <a href="#" id="button1">MODAL BOX #1</a>
  54.     <a href="#" id="button2">MODAL BOX #2</a>
  55.         
  56.     <div id="popupContact1">
  57.         <!-- Contenido POP-UP #1 -->
  58.     </div>
  59.     <div id="popupContact2">
  60.         <!-- Contenido POP-UP #2 -->
  61.     </div>
  62.     <div id="backgroundPopup"></div>
  63. </body>
  64. </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. #popupContact1{
  46.     display: none;
  47.     position: fixed;
  48.     _position: fixed; /* necesario para internet explorer 6*/
  49.     width: 420px;
  50.     height: 370px;
  51.     margin-top: -205px;
  52.     margin-left: -210px;
  53.     top: 50%;
  54.     left: 50%;
  55.     background: #FFFFFF;
  56.     border: 12px solid #cecece;
  57.     z-index: 2;
  58.     padding: 12px;
  59.     font-size: 13px;
  60. }
  61. #popupContact2{
  62.     display: none;
  63.     position: fixed;
  64.     _position: fixed; /* necesario para internet explorer 6*/
  65.     width: 420px;
  66.     height: 370px;
  67.     margin-top: -205px;
  68.     margin-left: -210px;
  69.     top: 50%;
  70.     left: 50%;
  71.     background: yellow;
  72.     border: 12px solid #cecece;
  73.     z-index: 2;
  74.     padding: 12px;
  75.     font-size: 13px;
  76. }
  77. #popupContactClose {
  78.     font-size: 14px;
  79.     line-height: 14px;
  80.     right: 6px;
  81.     top: 4px;
  82.     position: absolute;
  83.     color: #800000;
  84.     font-weight: 700;
  85.     display: block;
  86. }
  87. #button1,#button2{
  88.     text-align: left;
  89.     font-size: 13px;
  90.     cursor: pointer;
  91.     width: 100px;
  92.     margin: 0 auto;
  93.     margin-top: 10px;
  94. }

¿Alguien sabe como se puede hacer?
En el codigo CSS definí
#popupContact1 que abre la modal con fondo blanco
#popupContact2 que abre la modal con fondo amarillo

Y supuestamente cada enlace debería abrir una distinta
<a href="#" id="button1">MODAL BOX #1</a>
<a href="#" id="button2">MODAL BOX #2</a>

Sin embargo, ahora misma los dos abren la misma porque ambos cargan la misma función loadPopup();

Código Javascript: 
Ver original
  1. $("#button1").click(function () {
  2.         loadPopup();
  3.     });
  4.     $("#button2").click(function () {
  5.         loadPopup();
  6.     });

La clave esta en como hacer para no tener que repetir el codigo para cada modal box distinta en la página

Código Javascript: 
Ver original
  1. function loadPopup() {
  2.     if (popupStatus == 0) {
  3.         $("#backgroundPopup").css({
  4.             "opacity": "0.7"
  5.         });
  6.         $("#backgroundPopup").fadeIn("slow");
  7.         $("#popupContact1").fadeIn("slow");
  8.         popupStatus = 1;
  9.     }
  10. };
  11.  
  12. function disablePopup() {
  13.     if (popupStatus == 1) {
  14.         $("#backgroundPopup").fadeOut("slow");
  15.         $("#popupContact1").fadeOut("slow");
  16.         popupStatus = 0;
  17.     }
  18. };

Muchas gracias de antemano!
  #2 (permalink)  
Antiguo 06/04/2010, 03:04
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 1 mes
Puntos: 20
Respuesta: Abrir 2 o mas modal box distintas con Jquery
No he conseguido distinguir entre las dos ventanas modal, con el siguiente código me abre las dos a la vez.

index.php
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>Intento de 2 modal box</title>
  6.     <link rel="stylesheet" href="estilo.css" type="text/css" media="screen" />
  7. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
  8.  
  9. <script type="text/javascript"> 
  10.     var popupStatus = 0;
  11.     function loadPopup() {
  12.     if (popupStatus == 0) {
  13.         $("#backgroundPopup").css({
  14.             "opacity": "0.7"
  15.         });
  16.         $("#backgroundPopup").fadeIn("slow");
  17.         $("#popupContact1").fadeIn("slow");
  18.         $("#popupContact2").fadeIn("slow");
  19.         popupStatus = 1;
  20.     }
  21. };
  22.  
  23. function disablePopup() {
  24.     if (popupStatus == 1) {
  25.         $("#backgroundPopup").fadeOut("slow");
  26.         $("#popupContact1").fadeOut("slow");
  27.         $("#popupContact2").fadeOut("slow");
  28.         popupStatus = 0;
  29.     }
  30. };
  31.  
  32. $(document).ready(function () {
  33.     $("#button1, #button2").click(function () {
  34.         loadPopup();
  35.     });
  36.     $("#popupContactClose").click(function () {
  37.         disablePopup();
  38.     });
  39.     $("#backgroundPopup").click(function () {
  40.         disablePopup();
  41.     });
  42.     $(document).keypress(function (e) {
  43.         if (e.keyCode == 27 && popupStatus == 1) {
  44.             disablePopup();
  45.         }
  46.     });
  47. });
  48. </script>
  49. </head>
  50. <body>
  51.         
  52.     <a href="#" id="button1">MODAL BOX #1</a>
  53.     <a href="#" id="button2">MODAL BOX #2</a>
  54.         
  55.     <div id="popupContact1">
  56.         <!-- Contenido POP-UP #1 -->
  57.     </div>
  58.     <div id="popupContact2">
  59.         <!-- Contenido POP-UP #2 -->
  60.     </div>
  61.     <div id="backgroundPopup"></div>
  62. </body>
  63. </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. #popupContact1{
  46.     display: none;
  47.     position: fixed;
  48.     _position: fixed; /* necesario para internet explorer 6*/
  49.     width: 420px;
  50.     height: 370px;
  51.     margin-top: -205px;
  52.     margin-left: -210px;
  53.     top: 50%;
  54.     left: 50%;
  55.     background: #FFFFFF;
  56.     border: 12px solid #cecece;
  57.     z-index: 2;
  58.     padding: 12px;
  59.     font-size: 13px;
  60. }
  61. #popupContact2{
  62.     display: none;
  63.     position: fixed;
  64.     _position: fixed; /* necesario para internet explorer 6*/
  65.     width: 100px;
  66.     height: 100px;
  67.     margin-top: 0px;
  68.     margin-left: 0px;
  69.     top: 50%;
  70.     left: 50%;
  71.     background: yellow;
  72.     border: 12px solid #cecece;
  73.     z-index: 2;
  74.     padding: 12px;
  75.     font-size: 13px;
  76. }
  77. #popupContactClose {
  78.     font-size: 14px;
  79.     line-height: 14px;
  80.     right: 6px;
  81.     top: 4px;
  82.     position: absolute;
  83.     color: #800000;
  84.     font-weight: 700;
  85.     display: block;
  86. }
  87. #button1,#button2{
  88.     text-align: left;
  89.     font-size: 13px;
  90.     cursor: pointer;
  91.     width: 100px;
  92.     margin: 0 auto;
  93.     margin-top: 10px;
  94. }

¿Alguna idea?

Muchas gracias de antemano
  #3 (permalink)  
Antiguo 06/04/2010, 03:18
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 1 mes
Puntos: 20
Respuesta: Abrir 2 o mas modal box distintas con Jquery
Creo que lo he conseguido

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>Intento de 2 modal box</title>
  6.     <link rel="stylesheet" href="estilo.css" type="text/css" media="screen" />
  7. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
  8.  
  9. <script type="text/javascript"> 
  10.     var popupStatus = 0;
  11.     function loadPopup(ventana) {
  12.     if (popupStatus == 0) {
  13.         $("#backgroundPopup").css({
  14.             "opacity": "0.7"
  15.         });
  16.         $("#backgroundPopup").fadeIn("slow");
  17.         if (ventana == 1) { $("#popupContact1").fadeIn("slow");}
  18.         else if (ventana == 2) {$("#popupContact2").fadeIn("slow");}
  19.         popupStatus = 1;
  20.     }
  21. };
  22.  
  23. function disablePopup() {
  24.     if (popupStatus == 1) {
  25.         $("#backgroundPopup").fadeOut("slow");
  26.         $("#popupContact1, #popupContact2").fadeOut("slow");
  27.         popupStatus = 0;
  28.     }
  29. };
  30.  
  31. $(document).ready(function () {
  32.     $("#button1").click(function () {
  33.         loadPopup(1);
  34.     });
  35.     $("#button2").click(function () {
  36.         loadPopup(2);
  37.     });
  38.     $(".popupContactClose").click(function () {
  39.         disablePopup();
  40.     });
  41.     $("#backgroundPopup").click(function () {
  42.         disablePopup();
  43.     });
  44.     $(document).keypress(function (e) {
  45.         if (e.keyCode == 27 && popupStatus == 1) {
  46.             disablePopup();
  47.         }
  48.     });
  49. });
  50. </script>
  51. </head>
  52. <body>
  53.         
  54.     <a href="#" id="button1">MODAL BOX #1</a>
  55.     <a href="#" id="button2">MODAL BOX #2</a>
  56.     
  57.     <div id="popupContact2">
  58.     <a class="popupContactClose">x</a>
  59.         <!-- Contenido POP-UP #2 -->
  60.     </div>
  61.     
  62.     <div id="popupContact1">
  63.     <a class="popupContactClose">x</a>
  64.         <!-- Contenido POP-UP #1 -->
  65.     </div>
  66.     
  67.     <div id="backgroundPopup"></div>
  68. </body>
  69. </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. #popupContact1{
  46.     display: none;
  47.     position: fixed;
  48.     _position: fixed; /* necesario para internet explorer 6*/
  49.     width: 420px;
  50.     height: 370px;
  51.     margin-top: -205px;
  52.     margin-left: -210px;
  53.     top: 50%;
  54.     left: 50%;
  55.     background: #FFFFFF;
  56.     border: 12px solid #cecece;
  57.     z-index: 2;
  58.     padding: 12px;
  59.     font-size: 13px;
  60. }
  61. #popupContact2{
  62.     display: none;
  63.     position: fixed;
  64.     _position: fixed; /* necesario para internet explorer 6*/
  65.     width: 100px;
  66.     height: 100px;
  67.     margin-top: 0px;
  68.     margin-left: 0px;
  69.     top: 50%;
  70.     left: 50%;
  71.     background: yellow;
  72.     border: 12px solid #cecece;
  73.     z-index: 2;
  74.     padding: 12px;
  75.     font-size: 13px;
  76. }
  77. .popupContactClose {
  78.     font-size: 14px;
  79.     line-height: 14px;
  80.     right: 6px;
  81.     top: 4px;
  82.     position: absolute;
  83.     color: #800000;
  84.     font-weight: 700;
  85.     display: block;
  86. }
  87. #button1,#button2{
  88.     text-align: left;
  89.     font-size: 13px;
  90.     cursor: pointer;
  91.     width: 100px;
  92.     margin: 0 auto;
  93.     margin-top: 10px;
  94. }

Qué os parece? Se puede optimizar algo???

Muchas gracias de antemano!

Etiquetas: box, distintas, mas, 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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 06:00.