Page load Overlay
Question
I have a site that I would like for new users to see a contact us when the page loads. I have tried numerous methods and gotten an overlay but the ability to hide and continue onto the page is not working.
$(document).ready(function() { $('#overlay').fadeIn(); }); $('button').click(function() { $('#overlay').fadeOut(200, "linear"); }); function openNav() { document.getElementById("myNav").style.height = "100%"; } function closeNav() { document.getElementById("myNav").style.height = "0%"; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script> </head> <body> <div id="myNav" class="overlay"> <h1>Text</h1> <button>hide</button> </div> </body> </html>
If any suggestions for closing the popup exist please share.
3 answers
solution1
0 ACCPTED 2017-07-26 06:35:49
There are a bunch of ways to hide an element, being the most common one to set
document.getElementById("myNav").style.display = "none";
And to show it again
// Empty to have the one specified by CSS or the element default.
// Or "block", "inline", "inline-block"... Whatever fits you better.
document.getElementById("myNav").style.display = "";
If you hide by height (is a good decision if you have a CSS transision, but you need fixed heights), you need to set the element overflow to hidden. By default, if the content of an element is bigger than the element size it will be shown, so your .overlay class should have overflow: hidden to hide it.
By the way, you are using dynamic heights so you are not using transitions. As a recommendation, use the display way instead.
EDIT: Just noticed the ID problem that @Rubenxfd points out. He is right. Is going to be the main problem for sure.
Also, another problem you have is that you run this code
$('button').click(function() {
$('#overlay').fadeOut(200, "linear");
});
before the button element is rendered, so the event won't attach to it as it don't exists. You should attach it when the page is ready, so you have to move it inside the ready function, like this:
$(document).ready(function() {
$('#myNav').fadeIn();
$('button').click(function() {
$('#myNav').fadeOut(200, "linear");
});
});
Notice the difference.
solution2
0 2017-07-26 06:36:11
You are using an class , but calling an id in your jQuery.
Change your jQuery to this:
$(document).ready(function() {
$('.overlay').fadeIn();
});
$('button').click(function() {
$('.overlay').fadeOut(200, "linear");
});
solution3
0 2017-07-26 06:39:23
You had a # instead of a . . $('#overlay').fadeOut(200, "linear"); will happen to the element with the id overlay not to the class. if you write $('.overlay').fadeOut(200, "linear"); it will happen to all elements with the class of overlay
$(document).ready(function() { $('.overlay').fadeIn(); }); $('button').click(function() { $('.overlay').fadeOut(200, "linear"); }); function openNav() { document.getElementById("myNav").style.height = "100%"; } function closeNav() { document.getElementById("myNav").style.height = "0%"; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script> </head> <body> <div id="myNav" class="overlay"> <h1>Text</h1> <button>hide</button> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.