CODEWITHSUNDEEP
javascriptjquerycss
Owen Dawson
Owen Dawson

Reputation: 73

how to ease in js popup modal

trying to ease in a popup modal using js, i have my code below but unsure where to add the transition style, i've looked in the css and there's no luck so im assuming its to do with the js of it.

My code is below.

// Get the modal
var modal = document.getElementById('loginModal');

// Get the button that opens the modal
var btn = document.getElementById("login");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal
btn.onclick = function() {
    modal.style.display = "block";
    modal.style.fadeIn(3000);
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none".fadeIn(3000);
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

Upvotes: 0

Views: 566

Answers (1)

G43beli
G43beli

Reputation: 3962

use jQuery: 

window.onclick = function(event) {
 if (event.target == modal) {
  $("#loginModal").fadeOut(3000)
 }
}

3000 stands for the amount of miliseconds you want the transition to be. Check this link for further infos about fade in and fade out: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_fadeout_fadein

Upvotes: 1

Related Questions