-
Notifications
You must be signed in to change notification settings - Fork 0
/
modal.js
37 lines (33 loc) · 1.17 KB
/
modal.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
'use strict';
// Selecting Elements
const modal = document.querySelector('.modal-window');
const overlay = document.querySelector('.overlay');
const button = document.querySelectorAll('.btn');
const buttons = document.querySelector('.btns');
const close = document.querySelector('.close');
// Function to open modal.
const openModal = function(){
buttons.classList.add("hidden");
modal.classList.remove("hidden");
overlay.classList.remove("hidden");
}
// Function to close modal.
const closeModal = function(){
buttons.classList.remove("hidden");
modal.classList.add("hidden");
overlay.classList.add("hidden");
}
// looping openModal function to all buttons.
for(let i=0; i< button.length; i++){
button[i].addEventListener('click', openModal);
}
// close modal when user click on close button.
close.addEventListener('click', closeModal);
overlay.addEventListener('click', closeModal);
// close modal when user press ESC key.
document.addEventListener('keydown', function(kp){
// Checking if ESC key was pressed and modal is open.
if(kp.key === 'Escape' && !modal.classList.contains('hidden')){
closeModal();
}
});