js/modal.js

// Get the box
var searchBox = document.getElementById('searchBox');

// Get the button that opens the box
var searchButton = document.getElementById("searchButton");

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

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

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

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