Maxim Brkn
Reputation: 105
CSS overlay effect doesnt close
I'm new here, so don't be angry.
It works only in one way, it overlays when you push the button, but when you press "Close" nothing happens. When I make in CSS .overlay fixed - it works but not scroll. And I need a scrolling overlay with some text, text could be longer than one page. Help, please :)
I've got this simple code:
<html>
<head>
<title>Fullscreen Overlay Animation</title>
</head>
<body>
<div id="container">
<button class="menuButton" id="overlay-menu" type="button">Open</button>
</div>
<div class="overlay overlay-data">
<button type="button" class="overlay-close">Close</button>
<nav>
<ul>
<li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae nulla vel leo porttitor viverra et nec nibh. Cras blandit leo risus, quis volutpat erat venenatis sit amet. In ac hendrerit purus, in euismod metus. In eu magna tempus, mattis risus a, facilisis dui. Nulla ac commodo est. Proin vitae accumsan felis. Nunc pulvinar lorem ac eros porta, ac egestas quam dignissim. Suspendisse viverra finibus odio in cursus.</p></li>
</ul>
</nav>
</div>
<script>
$( "#overlay-menu" ).click(function() {
$( ".overlay" ).addClass
('overlay-open');
});
</script>
<script>
$( ".overlay-close" ).click(function() {
$( ".overlay" ).removeClass
( 'overlay-open' );
});
</script>
</body>
</html>
#container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 50px;
width: 100px;
}
#overlay-menu {
width: 100px;
height: 50px:
}
body {
background: #7a7a7a;
color: #1D1F20;
font-family: "Roboto", sans-serif;
}
.menuButton {
background-color: #7a7a7a;
text-indent: 0;
border: 1px solid #000;
color: #fff
font-size: 15px;
font-weight: bold;
}
.menuButton:hover {
background-color: #474747;
}
.menuButton:active {
position: relative;
top; 1px;
}
.overlay {
position: scroll;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(255,255,255,0.80);
}
.overlay nav {
text-align: center;
position: relative;
top: 20%;
height: 60%;
font-size: 80px;
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
height: 100%;
position: relative;
}
.overlay ul li {
display: inline-block;
height: 20%;
}
.overlay ul li a {
font-weight: 300;
text-decoration: none;
display: block;
color: #1d1f20;
margin-right: 40px;
list-style: none;
}
.overlay-close {
width: 150px;
height: 50px;
position: fixed;
right: 10px;
top: 10px;
border: 1px solid #000;
font-size: 14px;
}
.overlay-data {
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
visibility: 0s 0.5s;
transition: opacity 0.5s, visibility 0s 0.5s;
}
.overlay-open {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
It works only in one way, it overlay, and when you press "Close" nothing happens. When I make overlay fixed - it works but not scroll. I need a scrolling overlay with some text, it could be longer than one page.
Upvotes: 1
Views: 361
Answers (2)
isherwood
Reputation: 61055
Need to bring your close button to the top with z-index:
.overlay-close {
...
z-index: 9999;
}
Notice that I simplified your jQuery function, too.
Upvotes: 1
