Ventana dentro de la WEB

Citar

Escrito el 19 May 2011 06:15 pm

Quiero buscar el código el cual hace que se pueda visualizar subpaginas en la misma web

algo asi como que se oscuresca toda la pantalla de la web y salga un recuadro de la subweb que hemos elegido y arriba un boton de cerrar

alguien conoce algun tutorial para hacer esto?

Por miguelsirna

315 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email Web

Hacker & Programmer

@miguelsirna

Citar

Escrito el 20 May 2011 02:45 pm

Un ejemplo simple y sencillo...

Código HTML :

<html>
</head>
<style type="text/css">
body {
   margin: 0;
   position: relative;
}
.negro {
   display: none;
   position: absolute;
   opacity: 0.50; /* IE8 no reconoce esto */
   filter:alpha(opacity=80); /* IE8 sí reconoce esto */
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: #000;
}
.fancy {
   display: none;
   position: absolute;
   top: 20px;
   left: 10%;
   width: 80%;
   height: 30%;
   background-color: #fff;
   border: 1px solid blue;
}
</style>
<script type="text/javascript">
function ShowFancy() {
   document.getElementById("negro").style.display="block";
   document.getElementById("fancy").style.display="block";
}
function CerrarFancy() {
   document.getElementById("fancy").style.display="none";
   document.getElementById("negro").style.display="none";
}
</script>
</head>
</body>
<div class="negro" id="negro"></div>
<div class="fancy" id="fancy">
   <p>Algún contenido</p>
   <p><a href="#" onClick="CerrarFancy(); return false;">Cerrar</a></p>
</div>
<a href="#" onClick="ShowFancy(); return false;">Mostrar fancy</a>
<p>Algún contenido aquí</p>
</body>
</html>

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 22 May 2011 09:34 am

brabazo men, pero me parece muy serion :C no tienes un efecto que haga que se habra lentamente, para que tenga una mejor vista cuando se habra el cuadro

Por miguelsirna

315 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email Web

Hacker & Programmer

@miguelsirna

Citar

Escrito el 22 May 2011 04:31 pm

chiguel escribió:

brabazo men, pero me parece muy serion :C no tienes un efecto que haga que se habra lentamente, para que tenga una mejor vista cuando se habra el cuadro

Búscate una guía de JavaScript. Tu mismo puedes ir añadiéndole las modificaciones que quieras al código que te dio DriverOp.

Por davp

Claber

278 de clabLevel

1 tutorial

Genero:Masculino

Envíale un mensaje privado

Venezuela

@raramntnatural

Citar

Escrito el 22 May 2011 05:20 pm

entonces ese codigo de todas formas lo coloco y de ahi lo voy modificando?

Por miguelsirna

315 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email Web

Hacker & Programmer

@miguelsirna

Citar

Escrito el 22 May 2011 05:26 pm

Si, a partir de ese código puedes desarrollar mejores efectos.

Por davp

Claber

278 de clabLevel

1 tutorial

Genero:Masculino

Envíale un mensaje privado

Venezuela

@raramntnatural

Citar

Escrito el 22 May 2011 08:09 pm

chiguel:
El código que he posteado es lo mínimo necesario (a mi parecer) para lograr la funcionalidad que buscas. Como bien dice davp, a partir de allí puedes construir cosas más sofisticadas.

Mi sugerencia es que uses JQuery con easing si quieres lograr el efecto que quieres. Como no me interesan esos efectos no tengo un código de ejemplo a mano.

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 22 May 2011 08:50 pm

ya coloque el codigo, como puedo hacer para que la ventana que se habre se centre en la pagina, he probado
margin 0 auto 0 y nada alguien tiene alguna idea quiero que el cuadro que se habre se centre en toda la pagina

Por miguelsirna

315 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email Web

Hacker & Programmer

@miguelsirna

Citar

Escrito el 22 May 2011 10:29 pm

Cuando un elemento tiene position diferente de "static" (que es el valor por omisión de todos los elementos), la propiedad margin pierde relevancia (sentido común: si pones un top: 10px y un margin-top: 20px ¿significa que el <div> tiene que estar a 30 píxeles del borde superior?).

Por lo tanto no importa qué valor le des a margin, lo ignorará.
Entonces lo que queda por hacer es darle valor a top y left apropiadamente para que el <div> quede al centro de la ventana. Y eso se puede hacer con JavaScript.

Agrega estas funciones y reemplaza la función ShowFancy() tal como aparece aquí:

Código Javascript :

function GetWinWidth() {
   var w;
   if (typeof window.innerWidth != 'undefined') {
      w = window.innerWidth;
   } else {
      if (typeof document.documentElement != 'undefined'
        && typeof document.documentElement.clientWidth != 
        'undefined' && document.documentElement.clientWidth != 0) {
         w = document.documentElement.clientWidth;
      } else {   
         w = document.getElementsByTagName('body')[0].clientWidth;
      }
   }
   return w;
}
function GetWinHeight() {
   var h;
   if (typeof window.innerHeight != 'undefined') {
      h = window.innerHeight;
   } else {
      if (typeof document.documentElement != 'undefined'
        && typeof document.documentElement.clientHeight != 
        'undefined' && document.documentElement.clientHeight != 0) {
         h = document.documentElement.clientHeight;
      } else {   
         h = document.getElementsByTagName('body')[0].clientHeight;
      }
   }
   return h;
}

function ShowFancy() { 
   document.getElementById("negro").style.display="block";
   document.getElementById("fancy").style.display="block";
   var w = GetWinWidth()-100;
   var h = document.getElementById("fancy").clientHeight;
   var l = parseInt((GetWinWidth()-w) / 2);
   var t = parseInt(GetWinHeight()/ 2)-parseInt(h / 2);
   document.getElementById("fancy").style.width = w+"px";
   document.getElementById("fancy").style.top = t+"px";
   document.getElementById("fancy").style.left = l+"px";
}

Lo que hace es a partir de las dimensiones actuales de la ventana, calcular los valores para el ancho y la posición desde el borde superior.

No hay una forma trivial de obtener las dimensiones de la ventana. Por eso he escrito dos funciones que toman el ancho y el alto de la ventana que deberían ser compatibles con todos los navegadores (al menos lo he probado en IE7/8, Opera, FF y Chome).

El ancho del <div> lo hago igual al ancho de la ventana menos 100 píxeles. Para centrarlo horizontalmente tomo el ancho de la ventana menos el ancho del <div> dividido dos (resultado entero) y asigno al "width" del <div>.

Para el alto no es tan simple porque el contenido del <div> puede variar dependiendo de lo que le pongas adentro y al menos que establescas explícitamente el "height" en píxeles esa propiedad queda indefinida. Pero se puede usar la propiedad "clientHeight" que es el alto en píxeles del interior del <div> (como el <div> no tiene "margin" por tener "position: relative", ese valor no importa, pero sí hay diferencia si le pones un "border"...).

Sabiendo el alto de la ventana y el alto del <div> calculo el valor para "top" dividiendo por dos el alto de la ventana y restándole la mitad del alto del <div> y ya está.

Si tu próxima pregunta será "pero si redimensiono la ventana, el <div> se escapa por la derecha y por debajo de ésta!", te diré que si bien es posible redimensionar el <div> dinámicamente, tienes el problema de que cuando más pequeña la ventana, más pequeño se haría el <div> y llegará el momento en que el <div> no tiene espacio para mostrar todo el contenido...

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 23 May 2011 05:43 am

TENGO UN PROBLEMA, ACABO DE COLOCAR EL CODIGO A MI PAGINA PRINCIPAL Y PARACE QUE DICHO CODIGO SOLO AFECTA AL DIV QUE SE ENCUENTRA PUEDEN VER ACA

http://limanightzone.com

Denle cliks a los menus

que puedo hacer, solo se opaca ese div

Por miguelsirna

315 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email Web

Hacker & Programmer

@miguelsirna

Citar

Escrito el 23 May 2011 11:29 am

Este div:
<div class="negro" id="negro"></div>
Debe estar fuera del div con id "top".
Sugiero que lo pongas en el código inmediatamente después del tag <body> o inmediatamente antes del tag </body>

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web