Tema: Ventana que se abre
Ver Mensaje Individual
  #6 (permalink)  
Antiguo 03/07/2014, 17:05
Avatar de fedefrankk
fedefrankk
 
Fecha de Ingreso: agosto-2007
Mensajes: 871
Antigüedad: 17 años, 3 meses
Puntos: 7
Pregunta Respuesta: Ventana que se abre
Buenas a todos como andan?... copie tal cual los codigos que pusieron de ejemplo y no me funcinoa....... no se que estoy haciendo mal..
Si me dicen donde esta el famoso error.!!! se los agradecere...

dejo mi archivo

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>Documento sin título</title>
  6. <script type="text/javascript">
  7. var mostrar = document.getElementById("mostrar"),
  8.     fondo = document.getElementById("fondo"),
  9.     contenido = document.getElementById("contenido"),
  10.     body = document.body,
  11.     width = window.innerWidth,
  12.     height = window.innerHeight;
  13.  
  14. mostrar.addEventListener("click", function(){
  15.     fondo.style.display = "block";
  16.     fondo.style.width = width + "px";
  17.     fondo.style.height = height + "px";
  18.     
  19.     contenido.style.display = "block";
  20.     contenido.style.top = ((height / 2) - (contenido.offsetHeight / 2) + window.scrollY) + "px";
  21.     contenido.style.left = ((width / 2) - (contenido.offsetWidth / 2) + window.scrollX) + "px";
  22.     
  23.     body.style.overflow = "none";    
  24. }, false);
  25.  
  26. fondo.addEventListener("click", function(){
  27.     fondo.style.display = "none";
  28.     fondo.style.width = 0;
  29.     fondo.style.height = 0;
  30.     
  31.     contenido.style.display = "none";
  32.     
  33.     body.style.overflow = "auto";
  34. }, false);
  35.  
  36. </script>
  37. <style>
  38. body{
  39.     margin: 0;
  40. }
  41.  
  42. #fondo, #contenido{
  43.     display: none;
  44.     position: absolute;
  45.     z-index: 1000;
  46. }
  47.  
  48. #fondo{
  49.     background: rgba(0, 0, 0, .75);
  50.     top: 0;
  51.     left: 0;
  52. }
  53.  
  54. #contenido{
  55.     background: white;
  56.     width: 25em;
  57.     height: 15em;
  58.     border-radius: .5em;
  59.     overflow: auto;
  60.     /* OPCIONAL */
  61.     text-align: center;
  62.     line-height: 15em;
  63.     font-weight: bolder;
  64. }
  65. </style>
  66. </head>
  67.  
  68. <body>
  69.  
  70.  
  71. <div id = "fondo"></div>
  72. <div id = "contenido">
  73.     ¡Hola mundo!
  74.     Dale clic al fondo oscuro para cerrar esto
  75. </div>
  76. <button id="mostrar">Mostrar ventana modal</button>
  77. </body>
  78. </html>