Greetings everyone, I'm new around here so please bear with me.
I am encountering an issue wherein the overlay only works in one direction - it appears when the button is clicked, but nothing happens when attempting to close it. I have tried adjusting the CSS by setting the .overlay to fixed positioning, which allows the overlay to appear but disables scrolling. My requirement is for a scrolling overlay that can accommodate text longer than a single page. Any assistance would be greatly appreciated :)
Below is the code snippet I have been working with:
<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 ...
...
<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-open {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
The current setup only allows for one-way interaction with the overlay, and closing it does not function as expected. The solution involving a fixed overlay causes issues with scrolling. What I require is a scrollable overlay capable of displaying extensive text content.