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