I've successfully set up a basic popup using jQuery. When a button is clicked, it changes the 'display' property of a div from 'none' to 'block' in CSS and creates an overlay to darken the background.
Take a look at my code:
function showPopup() {
$("#login").css({display:'block'});
$("#overlay").css({background:'#000'});
$("#overlay").css({zIndex:'2'});
}
//Function to Hide Popup
function hidePopup(){
$("#login").css({display:'none'});
$("#overlay").css({background:'none'});
$("#overlay").css({zIndex:'-1'});
}
Here's the HTML markup for the popup itself:
<div id="overlay"></div>
<button onClick="showPopup()">Click me</button>
<div id="login">
<div id="loginpopup">
stuff
</div>
</div>
I would like to add an animation effect, such as fading in, when the popup is displayed. I attempted to use $("#login").fadeIn(); within the 'showPopup()' function, but it didn't work as expected.
If anyone has suggestions or solutions, I would greatly appreciate it.
Thanks in advance,
Paul