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";
	// Focus on the search input bar
	document.getElementById("searchInput").focus();
}

// When the user clicks on <span> (x), close the box
closeBox.onclick = function() {
    searchBox.style.display = "none";
	// Empty the input bar
	var searchInput = document.getElementById('searchInput');
	searchInput.value = "";
}

// When the user clicks anywhere outside of the box, close it
window.onclick = function(event) {
    if (event.target == searchBox) {
        searchBox.style.display = "none";
		// Empty the input bar
		var searchInput = document.getElementById('searchInput');
		searchInput.value = "";
    }
}