I am trying to create a modal window that pops up when you click the sign in button in the nav bar. I've made it so both the modal and it's page overlay are set with 'display: none' in css. I've tried every method I could to get it to display on click and I just can't get it to work. I've tried fadeIn(). I've tried .css() to change it. I even tried making a special class with only 'display: none' and using .removeClass(). Nothing works!
This is a school assignment so I can't use jQuery UI. I'm not asking for it to be done for me. I just want a nudge in the right direction. Can someone help me? This is the code I've got right now.
$(document).ready(function() {
$('#login').click(function(event) {
event.preventDefault();
$('.overlay').removeClass('.displaynone');
$('.modal').removeClass('.displaynone');
});
});
Here is a JS Fiddle with the whole situation out there. The Log In button is supposed to bring up the overlay and the modal on top of it. I'd like for it to fade in, preferably with the modal having a second delay.
Fiddle: https://jsfiddle.net/duagdn8m/1/
https://jsfiddle.net/duagdn8m/5/ Just remove the . on the classname that you want to remove.
$('.overlay').removeClass('displaynone');
$('.modal').removeClass('displaynone');
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments