Trying to make a modal window appear after clicking the sign-in button in the navigation bar, but running into some issues. Both the modal and its overlay are initially set to 'display: none' in CSS. Have attempted various methods like fadeIn(), .css(), and creating a special class with only 'display: none' and using .removeClass(), but nothing seems to be working as expected.
This is for a school project, so jQuery UI is not an option. Just looking for guidance on how to proceed. Here's the current code:
$(document).ready(function() {
$('#login').click(function(event) {
event.preventDefault();
$('.overlay').removeClass('.displaynone');
$('.modal').removeClass('.displaynone');
});
});
Find the complete scenario in this JS Fiddle link. The goal is for clicking the Log In button to display the overlay and modal window, ideally with a fade-in effect and a delay on the modal:
Fiddle: https://jsfiddle.net/duagdn8m/1/