Skip to content

Instantly share code, notes, and snippets.

@lionhylra

lionhylra/scrollable_overlay

Created November 24, 2013 06:01
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 lionhylra/7623880 to your computer and use it in GitHub Desktop.
Save lionhylra/7623880 to your computer and use it in GitHub Desktop.
Download ZIP
类似于perinterest的overlay效果
Raw
scrollable_overlay
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.noscroll{
overflow:hidden;
}
.mask{
position:fixed;
overflow-y:scroll;
top:0;
left:0;
right: 0;
bottom:0;
display: none;
background-color: rgba(227,224,226,0.9);
text-align: center;
cursor: -webkit-zoom-out;
}
.overlay{
position: static;
margin:0 auto;
padding: 0;
/*display:none;*/
background-color:white;
width:20%;
cursor: auto;
}
body{
cursor: -webkit-zoom-in;
}
</style>
</head>
<body>
<button type="button" name="pop" id="popbtn">hahahahaha</button>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<p>blablabla<p>
<div class="mask">
<div id="pop" class="overlay">
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
</div></div>
</body>
</html>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
var scrollTop;
$('body').click(function(){
// alert('click');
$('.mask').show();
// $('.overlay').show();
$('body').addClass('noscroll');
scrollTop=$('body').scrollTop();
});
$('.mask').click(function(e){
$(this).hide();
e.stopPropagation();
$('body').removeClass('noscroll');
$('body').scrollTop(scrollTop);
});
$('.overlay').click(function(e){
e.stopPropagation();
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment