I'm using ES5. I'm learning JavaScript.
I did this modal, but I want to re-factor the code that's there, I'm pretty sure there is a better way to do this.
If I add 5modals, how will the code know which modal is which? How can I add that functionality as well? I guess it had to do with id's, but how would that be dynamic? Or is that more OOP JS?
Here is the code in the codepen - https://codepen.io/lovetocodex/pen/mpxmjY
And the modal seems to kinda pop up not as smooth, even though I set opacity and transition - it goes away smoothly however.
JS code:
window.onload = function() {
//Variables
var modal = document.querySelector('.modal');
var modalBtn = document.querySelector('.modal-btn');
var modalCloseBtn = document.querySelector('.modal__close');
var body = document.querySelector('body');
var modalOverlay = document.createElement('div');
modalOverlay.className = 'modal-overlay';
function openModal(e) {
e.preventDefault();
modalOverlay.classList.add('is-open');
modal.classList.add('is-open');
document.body.appendChild(modalOverlay);
}
function closeModal(e) {
modalOverlay.classList.remove('is-open');
modal.classList.remove('is-open');
document.body.removeNode(modalOverlay);
}
modalCloseBtn.addEventListener('click', closeModal);
modalOverlay.addEventListener('click', closeModal);
modalBtn.addEventListener('click', openModal);
}
The HTML:
<button class="modal-btn"> Click Me </button>
<div class="modal">
<div class="modal__inner">
<div class="modal__header">
<h1>Awesome Modal</h1>
<button class="modal__close">
✖
</button>
</div>
<div class="modal__content">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas corporis, ad quae sit reprehenderit amet, ipsam delectus error excepturi suscipit labore. Neque animi vero perspiciatis accusamus doloribus praesentium minus magnam.</p>
</div>
</div><!-- /modal__content -->
</div>