Skip to content

Instantly share code, notes, and snippets.

@emamut

emamut/foo.html

Last active August 19, 2016 20:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save emamut/5799b2f41b5fd872988417c322cbdfa0 to your computer and use it in GitHub Desktop.
Save emamut/5799b2f41b5fd872988417c322cbdfa0 to your computer and use it in GitHub Desktop.
Download ZIP
Banner con Especial en Modal
Raw
foo.html
<!doctype html>
<html lang="es-419">
<head>
<title>7 de 10 productos en Ecuador están entre los más caros</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript">
$().ready(function(){
var ta=0;
var tt=0;
$('.boton').click(function(){
document.getElementsByTagName("html")[0].style.overflow = "hidden";
$('#especial_parent').show();
$('#especial').fadeIn();
});
$('#salir').click(function(){
document.getElementsByTagName("html")[0].style.overflow = "auto";
$('#especial_parent').hide();
$('#especial').fadeOut();
});
});
</script>
</head>
<body>
<div id='especial_parent'>
<div id="salir"><span class='blanco'>Cerrar <i class="fa fa-times" aria-hidden="true"></i></span></div>
</div>
<div id="especial" >
<iframe class="iframe-modal" src="https://slate.adobe.com/cp/1UpnH/" width='100%' height='100%' frameborder="0" marginwidth="0px" marginheight="0px" scrolling="no"></iframe>
</div>
<div class="boton"></div>
</body>
<style type="text/css">
#salir {
position: absolute;
top: 2%;
left: 92%;
width: 45px;
height: 45px;
/*background-image:url('http://especiales.elcomercio.com/2015/06/alimentos/img/cierra.png');*/
background-repeat: no-repeat;
margin-top: 10px;
background-size: cover;
float: right;
cursor: pointer;
}
.boton {
position: relative;
width: 100%;
height: 50px;
background-image: url(http://especiales.elcomercio.com/2015/06/alimentos/img/banner.jpg);
margin-bottom: 15px;
float: left;
cursor: pointer;
}
#especial {
position: fixed;
top: 5%;
left: 5%;
width: 90%;
height: 90%;
display: none;
z-index: 1000000;
overflow: none;
background-color: #000;
margin: 0 auto;
padding: 0;
}
#especial_parent {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000000;
overflow: none;
background-color: #000;
margin: 0 auto;
padding: 0;
display: none;
}
#especial p {
color: #fff;
margin-left: 10%;
margin-right: 10%;
display: inline-block;
}
.centrar {
position: relative;
width: 50%;
margin: 0 auto;
background-color: red;
text-align: center;
}
.blanco {
color: #fff;
}
</style>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment