Mostrar ventana en la posición de un botón

salvador86 · #1 (**permalink**) 10/12/2008, 11:28

Hola, tengo problemas con la posición de una ventana flotante (que en realidad es una capa o layer que esta oculto) que al dar clic en cierto botón se hace visible.

Para que puedan entender perfectamente mi problema en este http://www.peru-expeditions.com/c-pareja14-d.htm hay un formulario en la parte inferior que al llenar los dos primeros casilleros y hacer clic se muestra la ventana(no se envia el mensaje sino hasta hacer clic en el botón aceptar que esta en la ventana que aparece)

Mi problema es que como coloco manualmente la posición de esta ventana, cada vez que hago una modificación tengo que cambiar la posición y que decir de mostrarlo en diferentes navegadores la posición también cambia.

Me gustaría que en vez de poner la posición manualmente, con un javascript le diga que la posición inferior de la ventana se muestre al ras del botón con el que se le llama, es decir lo oculte.

Lo que uso es lo siguiente:

Cita:

y despues lo llamo con:

Cita:

document.getElementById('win').style.visibility="v isible";

He buscado la manera de hacerlo pero o bien solo funcionan en explorer y otros se muestran según la posición del mouse.

Espero me puedan ayudar muchas gracias.

Panino5001 · #2 (**permalink**) 10/12/2008, 21:53

En realidad podrías solucionarlo con css sin problemas. Con javascript hay varias posibilidades, pero ya que el formulario está casi al final de la página y seguramente no vas a cambiar su ubicación respecto del pie de la página, podrías usar el final de la página como medida de referencia y posicionarlo con un valor constante respecto de ese punto (en este ejemplo llamé delta a ese valor):

Código PHP:

  <script>
function getWindowData(){
    var widthViewport,heightViewport,xScroll,yScroll,widthTotal,heightTotal;
    if (typeof window.innerWidth != 'undefined'){
        widthViewport= window.innerWidth-17;
        heightViewport= window.innerHeight-17;
    }else if(typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth !='undefined' && document.documentElement.clientWidth != 0){
        widthViewport=document.documentElement.clientWidth;
        heightViewport=document.documentElement.clientHeight;
    }else{
        widthViewport= document.getElementsByTagName('body')[0].clientWidth;
        heightViewport=document.getElementsByTagName('body')[0].clientHeight;
    }
    xScroll=self.pageXOffset || (document.documentElement.scrollLeft+document.body.scrollLeft);
    yScroll=self.pageYOffset || (document.documentElement.scrollTop+document.body.scrollTop);
    widthTotal=Math.max(document.documentElement.scrollWidth,document.body.scrollWidth,widthViewport);
    heightTotal=Math.max(document.documentElement.scrollHeight,document.body.scrollHeight,heightViewport);
    return [widthViewport,heightViewport,xScroll,yScroll,widthTotal,heightTotal];
} 
function posicionar(){
    var delta='500';
    var pos=getWindowData();
    document.getElementById('win').style.top=(pos[5]-delta)+'px';
}
</script>
</head>
<body onLoad="iniciar();posicionar()">

salvador86 · #3 (**permalink**) 16/12/2008, 08:21

Gracias Panino, pero la posición del formulario no siempre es la parte inferior, aveces en el medio (ejemplo: http://www.peru-expeditions.com/c-pareja1-2c.htm) y el contenido (texto)que se muestra arriba del formulario decide la posición de él, es así que tampoco puedo colocar una posición general desde la parte superior (top) a la ventana que esta oculta, en css puedo centrar un objeto con screen, pero no encuentro la manera de posicionar la ventana de tal manera que oculta a este formulario desde su botón de enviar hacia arriba (en el link de arriba, debajo del formulario hay un swf que se muestra adelante de la ventana si esta esta en la posición). Alguna sugerencia gracias.