Skip to content

Instantly share code, notes, and snippets.

@fmagrosoto

fmagrosoto/popUp.html

Last active January 4, 2016 21:09
Show Gist options
  • Save fmagrosoto/8678998 to your computer and use it in GitHub Desktop.
Save fmagrosoto/8678998 to your computer and use it in GitHub Desktop.
Download ZIP
PopUp automático
Raw
popUp.html
<!DOCTYPE html>
<html lang='es-MX'>
<head>
<meta charset='UTF-8' />
<title>Mensaje en Pop-up</title>
<style>
body {
font-family: Georgia, serif;
font-size: 100%;
color: rgb(51,51,51);
background: whitesmoke;
}
a {
color: brown;
text-decoration: none;
}
a:hover {
color: red;
}
#contenedor {
position: relative;
width: 43.75em;
padding: .625em;
margin: 3.125em auto 0 auto;
}
#contenedor header {
margin-bottom: 1.5625em;
overflow: hidden;
}
#contenedor header h1 {
margin: 0 0 .3125em 0;
padding: 0;
text-shadow: 1px 1px 2px gray;
}
#contenedor header p {
margin: 0;
padding: 0;
text-shadow: 1px 1px 2px gray;
}
#contenedor section {
position: relative;
background: white;
padding: .625em;
border: 1px lightgray solid;
border-radius: .5em;
overflow: hidden;
}
#contenedor section p {
text-align: justify;
line-height: 1.25em;
}
#contenedor footer {
margin-top: 1.5625em;
}
#contenedor footer p {
margin: 0;
padding: 0;
text-shadow: 1px 1px 2px gray;
}
#mensaje-apoyo {
position: absolute;
top: 1.071428571em;
left: -18em;
font-size: .875em;
width: 14.285714286em;
background: red;
color: white;
padding: .714285714em;
border: .214285714em gray solid;
border-radius: .571428571em;
box-shadow: .357142857em .357142857em .714285714em gray;
transition: all 1s ease-out;
}
#mensaje-apoyo p {
margin: 0 0 .5em 0;
}
#mensaje-apoyo p:last-child {
margin-bottom: 0;
}
#mensaje-apoyo a {
color: yellow;
}
#mensaje-apoyo a:hover {
color: whitesmoke;
}
</style>
<script>
/**
* APARECER MENSAJE DE APOYO
*/
var popUp = function(){
// Contenedor padre
var padre = document.getElementById('padre');
var hijo = document.createElement('div');
hijo.setAttribute("id", "mensaje-apoyo");
var contenido = "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor porta orci.</p>";
contenido += "<p><a href='javascript:cerrarPUp();'>CERRAR</a></p>";
hijo.innerHTML = contenido;
padre.appendChild(hijo);
window.setTimeout(function(){
document.getElementById('mensaje-apoyo').style.left = 1.071428571 + 'em';
},500);
};
/**
* CERRAR POP UP
*/
var cerrarPUp = function(){
var msg = document.getElementById('mensaje-apoyo');
msg.style.left = -18 + 'em';
window.setTimeout(function(){
msg.parentNode.removeChild(msg);
},2000);
};
/**
* INICIAR POP UP
*/
var iniciarPUp = function(){
window.setTimeout(function(){
popUp();
},5000);
};
iniciarPUp(); // iniciar el conteo
</script>
</head>
<body>
<div id='contenedor'>
<header>
<h1>Mensaje en Pop-up</h1>
<p>Tipo de mensaje que aparece después de
algunos segundos de manera animada.
Y se esconde al pulsar en el botón
CERRAR del mismo mensaje.
</p>
</header>
<section id='padre'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
auctor porta orci, vel posuere tortor sagittis non. Aenean molestie
malesuada risus, at fermentum lectus scelerisque quis. Maecenas
placerat non eros nec ultricies. In id scelerisque est. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Aenean fringilla ligula lacus, non pretium nulla
volutpat facilisis. Donec pretium massa ac sem rutrum, eu adipiscing
odio pulvinar. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Praesent faucibus malesuada
velit, condimentum fermentum magna euismod id.</p>
<p>Cras ullamcorper eget risus eget dictum. Morbi eget ligula porta
leo porta condimentum sit amet auctor nunc. Aliquam adipiscing
sodales volutpat. Duis bibendum ut ante dapibus aliquam. Morbi non
blandit lectus. Sed aliquam et justo sed interdum. Sed id orci
pellentesque, dignissim ligula non, lacinia ipsum. Ut accumsan ante
eu felis aliquam, et ultricies ante bibendum. Nulla facilisi.
Vestibulum euismod ultricies urna, non dictum diam venenatis non.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
auctor porta orci, vel posuere tortor sagittis non. Aenean molestie
malesuada risus, at fermentum lectus scelerisque quis. Maecenas
placerat non eros nec ultricies. In id scelerisque est. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Aenean fringilla ligula lacus, non pretium nulla
volutpat facilisis. Donec pretium massa ac sem rutrum, eu adipiscing
odio pulvinar. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Praesent faucibus malesuada
velit, condimentum fermentum magna euismod id.</p>
<p>Cras ullamcorper eget risus eget dictum. Morbi eget ligula porta
leo porta condimentum sit amet auctor nunc. Aliquam adipiscing
sodales volutpat. Duis bibendum ut ante dapibus aliquam. Morbi non
blandit lectus. Sed aliquam et justo sed interdum. Sed id orci
pellentesque, dignissim ligula non, lacinia ipsum. Ut accumsan ante
eu felis aliquam, et ultricies ante bibendum. Nulla facilisi.
Vestibulum euismod ultricies urna, non dictum diam venenatis non.</p>
</section>
<footer>
<p>Copyleft 2014. <strong>Fernando Magrosoto V.</strong></p>
<p><a target='_blank'
href='http://www.twitter.com/fmagrosoto'>Sígueme en Twitter</a>
</p>
</footer>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment