// var modal = document.querySelector('.modal');  // assuming you have only 1
var modal = document.getElementById("modal");
var html = document.querySelector('html');

var disableModal = function() {
    modal.classList.remove('is-active');
    html.classList.remove('is-clipped');
    var modal_refresh = document.getElementsByClassName("modal-refresh");
    for(var i = 0; i < modal_refresh.length; i++) {
        modal_refresh[i].remove();
    }
}

var elements = document.querySelectorAll('.modal-background');
for(var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', function(e) {
        // elements[i].preventDefault();
        disableModal();
    });
}

var elements = document.querySelectorAll('.modal-close');
for(var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', function(e) {
        // elements[i].preventDefault();
        disableModal();
    });
}

function activateButtons() {
    var elements = document.querySelectorAll('.modal-close-button');
    for(var i = 0; i < elements.length; i++) {
        elements[i].addEventListener('click', function(e) {
            // elements[i].preventDefault();
            disableModal();
        });
    }
}
activateButtons();
// modal.querySelector('.modal-close-button').addEventListener('click', function(e) {
//   e.preventDefault();
//   modal.classList.remove('is-active');
//   html.classList.remove('is-clipped');
// });