Tema: Abrir 2 o mas modal box distintas con Jquery
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 05/04/2010, 15:06
Avatar de neodani
neodani
 
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 2 meses
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!