Как отложить событие отправки до завершения другого события в JS?

Question

Я делаю расширение для Chrome, которое создает и отображает наложение после нажатия определенной кнопки.Нажатие кнопки на текущей странице переводит ее на другую.Я хотел бы добавить оверлей после нажатия кнопки и перенести его на следующую страницу только после закрытия оверлея.Это мой первый проект с использованием JS, поэтому я немного растерялся.

Вот как я создаю оверлей

//injecting css
var link = document.createElement("link");
link.href = chrome.extension.getURL("css/overlay.css");
link.type = "text/css";
link.rel = "stylesheet";
document.head.appendChild(link);

//setting button's ID for easy referencing
var button = document.getElementsByName("proceedToCheckout")[0].setAttribute("id", "proceedToCheckout");

var overlay = document.createElement("DIV");
overlay.setAttribute("id", "overlay");
document.body.appendChild(overlay);

var url = chrome.extension.getURL("terry.jpg");
var img = document.createElement("IMG");
img.setAttribute("id", "terryImage");
img.setAttribute("src", url);
overlay.appendChild(img);

, и вот как я выполняю функцию основного клика

document.getElementById("proceedToCheckout").addEventListener("click", function()
 {
     alert("Do you really need that?");
     document.getElementById("overlay").style.display = "block";
     event.preventDefault();

     //disable overlay once clicked
     document.getElementById("overlay").addEventListener("click", function (){
        document.getElementById("overlay").style.display = "none";
    })

})

Поскольку я использую event.preventDefault (), он не позволяет мне продолжить событие.Есть ли другой способ, которым я могу пойти по этому поводу?Спасибо.