37 lines
1.1 KiB
JavaScript
37 lines
1.1 KiB
JavaScript
class Modal {
|
|
constructor() {
|
|
//selecting DOM elements in the constructor
|
|
this._modal = document.querySelector('#modal');
|
|
this._modalBtn = document.querySelector('#modal-btn');
|
|
this.addEventListeners(); //so that this functions runs right away
|
|
}
|
|
|
|
//add all event listeners in a function
|
|
addEventListeners() {
|
|
// this._modalBtn.addEventListener('click', this.open.bind(this)); //takes an event and call back function as parameter
|
|
this._modalBtn.addEventListener('click', () => {
|
|
this.open();
|
|
}); //takes an event and call back function as parameter
|
|
window.addEventListener('click', this.outsideClick.bind(this)); //takes an event and call back function as parameter
|
|
// receiving event from IdeaForm and running a call back function
|
|
document.addEventListener('closemodal', () => this.close());
|
|
}
|
|
|
|
//class methods
|
|
open() {
|
|
this._modal.style.display = 'block';
|
|
}
|
|
|
|
close() {
|
|
this._modal.style.display = 'none';
|
|
}
|
|
|
|
outsideClick(e) {
|
|
if (e.target === this._modal) {
|
|
this.close();
|
|
}
|
|
}
|
|
}
|
|
|
|
export default Modal;
|