Situar DIV Flotante

sergi_climent · #1 (**permalink**) 08/05/2009, 03:23

Hola, uso el siguiente codigo para mostrar y ocultar un Div Flotante:
JAVASCRIPT:

Código PHP:

  function mostrardiv(dive) {

 
    div = document.getElementById(dive);

    

    div.style.display = '';

 
}

 
function cerrar(dive) {

 
div = document.getElementById(dive);

 
div.style.display='none';

 
}

HTML:

Código HTML:

<div id="mostrarDiv">
<a href="javascript:mostrardiv('divmostrar');">Mostrar</a>
</div>
<div id="divmostrar" style="display:none;">
...
<a href="javascript:cerrar('divmostrar');">Tancar</a>
</div>

CSS:

Código:

#divmostrar{
	
	position: absolute;
	font-family:Arial;
	font-size:0.8em;
	border:1px solid #808080;
	background-color:#f1f1f1;
}

el caso q al mostrar el div me lo enseña justamente debajo de donde hay el link, me gustaria poder mostrarlo en mitad de la pantalla, es eso posible???

Saludos y gracias de antemano!

sergi_climent · #2 (**permalink**) 08/05/2009, 03:45

Bueno, me busque una solucion q me gusta más.

en el CSS le puse medidas y overflow.

Código:

divmostrar{
	
	position: absolute;
        width: 250px;
	height: 300px;
	overflow:auto;
	font-family:Arial;
	font-size:0.8em;
	border:1px solid #808080;
	background-color:#f1f1f1;
}

ssclamp · #3 (**permalink**) 08/05/2009, 18:46

Hola sergi_climent

Había entendido en tu primer mensaje de este hilo que querías que el div se abriera en el centro de la pantalla. Con tu segundo css no se consigue eso.

Si te interesa, o para cualquier otro interesado, dejo el código completo que abre una capa en el centro de la pantalla, independientemente de la resolución del monitor.

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 
<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />

<title>Abrir capa en el centro de la pantalla</title>

<script type="text/javascript">

function mostrardiv(post) { 

    div = document.getElementById(post); 

    div.style.display = ''; 

} 

 
function cerrar(post) { 

    div = document.getElementById(post); 

    div.style.display='none'; 

}

</script>

<style type="text/css">

#divmostrar {

    position: absolute;

    width: 250px;

    height: 300px;

    margin-left: -125px;

    margin-top: -150px;

    left: 50%;

    top: 50%;

    overflow: auto;

    font-family: Arial;

    font-size: 12px;

    border: 1px solid #808080;

    background-color: #f1f1f1;

    padding: 6px;

    text-align: left;

}

#close {

    position: absolute;

    bottom: 10px;

    left: 0px;

    width: 248px;

    text-align: center;

}

</style>

</head>

 
<body>

 
<p><a href="javascript:mostrardiv('divmostrar');">Mostrar</a></p>

 
<div id="divmostrar" style="display: none;">

    <p>Contenido de la capa</p>

    <span id="close"><a href="javascript:cerrar('divmostrar');">Cerrar</a></span>

</div>

 
</body>

</html>