Foros del Web - Ver Mensaje Individual

emprear · #2 (**permalink**) 01/05/2013, 06:46

Algunos ejemplos y variantes

Código HTML:

Ver original<!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>Overlay</title>
<style type="text/css">
/*<![CDATA[*/
html,body{
height: 100%;
margin: 0;
padding: 0;
border: none;
}
#ocultar{
 display: none;
 position:fixed;
 background:#000;
 width: 100%;
 height: 100%;
 opacity: 0.8;
 margin: 0;
 padding: 0;
 border: none;
 top:0;
 left:0;
 z-index: 999;
text-align: center;
padding-top: 200px;
overflow:hidden;
 }
 
#cerrar{
background: red;
color: #FFF;
border: solid red 2px;
border-radius: 5px;
position: absolute;
z-index: 1000;
text-align: center;
cursor: pointer;
width: 100px;
padding: 8px;
top: 40%;
left: 50%;
margin-left: -50px;
}
 
/*]]>*/
</style>
 
<script type="text/javascript">
//<![CDATA[
 
 function ocultar(){
 document.getElementById('ocultar').style.display ="block";
 }
 function desactivar(){
document.getElementById('hola').disabled = true;
}
//]]>
</script>
 
</head>
<body>
<div id="ocultar"><div onclick="this.parentNode.style.display ='none';" id="cerrar">cerrar</div></div>
<button onclick="ocultar();">ocultar todo</button>
<h1>xxxx</h1>
<h2>xxxxx</h2>
<button onclick="desactivar()">alerta</button>
<form action="#">
<input type="text" value="hola" name="hola" id="hola" />
</form>
</body>
</html>

Código HTML:

Ver original<!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>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
 
div#ns {
position: fixed;
width: 100%;
height:100%;
background-color: #000;
color: #FFF;
top:0px;
left:0px;
z-index: 999;
overflow:hidden;
opacity: 0.9;
display: none;
}
 
div.interior{
position:absolute;
top: 50%;
left: 50%;
width:350px;
height:300px;
margin-top: -150px; /*valor negativo mitad del alto*/
margin-left: -175px; /*valor negativo mitad del ancho*/
border: 2px solid #2982C6;
background-color: red;
text-align: center;
z-index: 999;
}
 
/*]]>*/
</style>
 
</head>
<body>
<div id="ns">
<div class="interior">
otro contenido<br />
<span onclick="document.getElementById('ns').style.display='none';" style="cursor: pointer; color: #000;">cerrar</span>
</div>
</div>
 
<h1>Título</h1>
<span onclick="document.getElementById('ns').style.display='block';" style="cursor: pointer;">popup</span>
</body>
</html>

http://foros.emprear.com/jquerye/jqm...al-window.html

Saludos