How do I animate a div to fade in or slide in on Click

Question

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

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

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

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

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

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

I'm hoping to add some animation to the div without using jquery as it is for a display banner and I don't want to bloat the overall file size with a library. Should be simple but can't seem to get it to work properly.

Answer 1

Change your code like this:

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

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

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

// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal.style.cssText = "visibility: visible;opacity: 1;transition: 0.3s";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.cssText = "visibility: hidden;opacity: 0;transition: 0.3s";
}

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

I change your open styles to:

modal.style.cssText = "visibility: visible;opacity: 1;transition: 0.3s";

And the close styles to:

modal.style.cssText = "visibility: hidden;opacity: 0;transition: 0.3s";

Working example: https://jsfiddle.net/sz8hq9vm/2/