EJEMPLOS VENTANA MODAL
EJEMPLOS VENTANA MODAL
========================================================================
<html>
<head>
<title>hinojosachapel.com | Una simple ventana modal con HTML y Javascript</title>
<script type="text/javascript">
function mostrarVentana()
{
var ventana = document.getElementById('miVentana'); // Accedemos al contenedor
ventana.style.marginTop = "100px"; // Definimos su posición vertical. La ponemos fija para simplificar el código
ventana.style.marginLeft = ((document.body.clientWidth-350) / 2) + "px"; // Definimos su posición horizontal
ventana.style.display = 'block'; // Y lo hacemos visible
}
function ocultarVentana()
{
var ventana = document.getElementById('miVentana'); // Accedemos al contenedor
ventana.style.display = 'none'; // Y lo hacemos invisible
}
</script>
</head>
<body>
Haz click <a href="javascript:mostrarVentana();">aquí</a>
<div id="miVentana" style="position: fixed; width: 350px; height: 190px; top: 0; left: 0; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; border: #333333 3px solid; background-color: #FAFAFA; color: #000000; display:none;">
<div style="font-weight: bold; text-align: left; color: #FFFFFF; padding: 5px; background-color:#006394">Título de la ventana</div>
<p style="padding: 5px; text-align: justify; line-height:normal">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum a est. Suspendisse vehicula, nisl vitae molestie pulvinar, eros nunc volutpat neque, sit amet ultricies nulla sem at ipsum.</p>
<div style="padding: 10px; background-color: #F0F0F0; text-align: center; margin-top: 44px;">
<input id="btnAceptar" onclick="ocultarVentana();" name="btnAceptar" size="20" type="button" value="Cerrar Ventana" />
</div>
</div>
</body>
</html>
========================================================================
VENTANA EMERGENTE
========================================================================
<html>
<head>
<title>Emergente 1</title>
</head>
<body>
<a href="" onclick='javascript:window.open("pagina.html","Miventana","width=300,height=200,menubar=no,top=130,left=930")'>Abrir</a>
</body>
</html>
(La ventana emergente que se va abrir se obtiene de Con "Guardar Como")
===================================================================
INNERT.HTML
===================================================================
<html>
<head></head>
<body>
<input type="button" value="oprimir" onclick="randNum();">
<div id="output"></div>
</body>
<script>
function randNum(){
var rand=Math.floor(Math.random()*20)+1
document.getElementById("output").innerHTML="Este es el resultado="+rand;
}
</script>
</html>
========================================================================
<html>
<head>
<title>hinojosachapel.com | Una simple ventana modal con HTML y Javascript</title>
<script type="text/javascript">
function mostrarVentana()
{
var ventana = document.getElementById('miVentana'); // Accedemos al contenedor
ventana.style.marginTop = "100px"; // Definimos su posición vertical. La ponemos fija para simplificar el código
ventana.style.marginLeft = ((document.body.clientWidth-350) / 2) + "px"; // Definimos su posición horizontal
ventana.style.display = 'block'; // Y lo hacemos visible
}
function ocultarVentana()
{
var ventana = document.getElementById('miVentana'); // Accedemos al contenedor
ventana.style.display = 'none'; // Y lo hacemos invisible
}
</script>
</head>
<body>
Haz click <a href="javascript:mostrarVentana();">aquí</a>
<div id="miVentana" style="position: fixed; width: 350px; height: 190px; top: 0; left: 0; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; border: #333333 3px solid; background-color: #FAFAFA; color: #000000; display:none;">
<div style="font-weight: bold; text-align: left; color: #FFFFFF; padding: 5px; background-color:#006394">Título de la ventana</div>
<p style="padding: 5px; text-align: justify; line-height:normal">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum a est. Suspendisse vehicula, nisl vitae molestie pulvinar, eros nunc volutpat neque, sit amet ultricies nulla sem at ipsum.</p>
<div style="padding: 10px; background-color: #F0F0F0; text-align: center; margin-top: 44px;">
<input id="btnAceptar" onclick="ocultarVentana();" name="btnAceptar" size="20" type="button" value="Cerrar Ventana" />
</div>
</div>
</body>
</html>
========================================================================
VENTANA EMERGENTE
========================================================================
<html>
<head>
<title>Emergente 1</title>
</head>
<body>
<a href="" onclick='javascript:window.open("pagina.html","Miventana","width=300,height=200,menubar=no,top=130,left=930")'>Abrir</a>
</body>
</html>
(La ventana emergente que se va abrir se obtiene de Con "Guardar Como")
===================================================================
INNERT.HTML
===================================================================
<html>
<head></head>
<body>
<input type="button" value="oprimir" onclick="randNum();">
<div id="output"></div>
</body>
<script>
function randNum(){
var rand=Math.floor(Math.random()*20)+1
document.getElementById("output").innerHTML="Este es el resultado="+rand;
}
</script>
</html>
0 comentarios: