estilo ventana como inicio sesion de foros del web

Beuses · #1 (**permalink**) 27/08/2012, 07:55

Hola a todos...

no se si estoy en el espacio correcto.. Perdonen si no es asi..

Pero tal y como dice el titulo... Quiero usar o crear una ventana como la que aparece cuando se va iniciar sesion aca en "foros del web" quiero usar ese estilo de... ventana? para usarla en la pagina en la que trabajo..

mi idea es que al darle clic a un boton (llamado "recomendar") se abra una ventana similar a la que me refiero de foros del web y escribir un correo electonico, se le da aceptar y envia el contenido html de esa pagina.

Espero haberme explicado...

Gracias de antemano... ^_^

maycolalvarez · #2 (**permalink**) 27/08/2012, 08:17

eso es simple CSS position:absolute; o fixed, consultelo por CSS, aunque existen librerías gráficas como sexyLightbox o jQueryUI

Beuses · #3 (**permalink**) 27/08/2012, 08:21

Muchas gracias por tu respuesta maycolalvarez...

Pero como lo busco.. es decir.. no se ni como se llama :$ buacare por css que?
formularios? ventanas? :S

Beuses · #4 (**permalink**) 27/08/2012, 11:12

Bueno, por si alguien mas lo busca...
Luego de buscar otro rato... encontre este otro tema:

http://www.forosdelweb.com/f4/ventan...3/#post2413182

Le hice arreglos para lo q yo nocesitaba y listo.. ^^

quedo así

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=utf-8" />

<title>Ventana Modal</title>

<script type="text/javascript">

<!--

function toogle()

 {

     var params=toogle.arguments;

     for(var i=1;i<params.length;i++)

      {       

        document.getElementById(params[i]).style.display=params[0];

      } 

 }

//--> 

</script>

<style type="text/css">

html, body {

    height: 100%;

    width: 100%;

    margin: 0;

    paddin: 0;

    overflow: hidden; 

}

#kba {

    height: 100%;

    width: 100%;

    overflow: auto;     

}

#modal {

     position: absolute;

     padding: 0;

     margin: 0;

     width: 100%;

     height: 100%;

     z-index: 50;

     /*filter: alpha(opacity=50);

     opacity: 0.5;*/

     -moz-opacity:0.5;

     background-color: #808080;

     left: 0;

     top: 0;

     overflow: auto;

}

#mContainer {

     background-color: #EBEBEB; /*#000000;*/

     font-family: Verdana, Geneva, sans-serif;

     font-size:12px;

     font-weight: bold;

     color: #000000; /*#ffffff;*/

     position: absolute;

     left: 25%;

     top: 25%;

     width: 500px;

     height: 50%; 

     z-index: 100;

     filter: alpha(opacity=100);

     opacity: 1;

     -moz-opacity:1;

     border: 3px solid #6297BC;

     border-radius: 5px;

     -moz-border-radius: 5px;

     -webkit-border-radius: 5px;

     padding-left: 5px;

}

.tb2 {

    /*background-image: url(../imagene/bg.png);*/

    border: 1px solid #6297BC;

    border-radius: 5px;

    -moz-border-radius: 5px;

    -webkit-border-radius: 5px;

    /*width: 210px;*/

}

</style>

</head>

 
<body>

<div id="kba">

<input type="button" id="open" value="Recomendar" onclick="toogle('block','modal','mContainer')"/>

</div>

<div id="modal" style="display:none">

    <div id="mContainer" style="display:none">

        <form action="modal.php" method="GET">

        <table width="500" border="1">

          <tr>

            <td>&nbsp;</td>

            <td><input id="close" type="button" value="X" onclick="toogle('none','modal','mContainer')" align="right"/></td>

          </tr>

          <tr>

            <td>Enviar a: <input name="correo_destino" type="text" size="30" class="tb2" /></td>

            <td>&nbsp;</td>

          </tr>

          <tr>

            <td>De: <input name="correo_envia" type="text" size="30" class="tb2" /></td>

            <td>&nbsp;</td>

          </tr>

          <tr>

            <td colspan="2"><input name="Enviar" value="Enviar" type="submit" />  <!--onclick="envia_correo()"   --></td>

          </tr>

        </table>

    </form>

    </div>

</div>

</body>

</html>

Hasta la proxima!!