Web-Development/Modal-Window/script.js at codeX1616/AnimationCSS · codeX1616/Web-Development

37 lines (30 loc) · 1.39 KB

// Modal window is not only about CSS, JavaScript actually brings life to it.

// Here we will be implementing responsiveness of modal window.

// Selecting all the necessary classes to accomplish the task.

const modal = document.querySelector(".modal");

const overlay = document.querySelector(".overlay");

const btnCloseModal = document.querySelector(".close-modal");

const btnOpenModal = document.querySelector(".show-modal");

// Creating a function which will contain all the actions that will get executed when show-modal button is clicked.

const openModal = function(){

modal.classList.remove('hidden');

overlay.classList.remove('hidden');

};

// Creating a function which will contain all the actions that will get executed when user want to close modal window.

const closeModal = function() {

modal.classList.add('hidden');

overlay.classList.add('hidden');

};

// Making show modal button responsive

btnOpenModal.addEventListener('click',openModal);

// For closing a modal window we will be implementing 3 ways.

// 1) when users click on close button.

btnCloseModal.addEventListener('click',closeModal);

// 2) when user clicks outside of the modal window.

overlay.addEventListener('click',closeModal);

// 3) when user presses escape button from the keyborad.

document.addEventListener('keydown', function(event) {

if(event.key === "Escape" && !modal.classList.contains('hidden')){

closeModal();

}

});

Provide feedback