document.getElementById('open-modal-link').addEventListener('click', function(){
    document.getElementById('my-modal').classList.add('open');
});

document.getElementById('close-modal-btn').addEventListener('click', function(){
    document.getElementById('my-modal').classList.remove('open');
});

window.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
        document.getElementById('my-modal').classList.remove('open');
    }
});

document.querySelector('#my-modal .modal-box').addEventListener('click', event => {
    event._isClickWithModal = true;
});
document.getElementById('my-modal').addEventListener('click', event => {
    if (event._isClickWithModal) return;
    event.currentTarget.classList.remove('open');
});