Functional JavaScript Programming - Making a Modal

2019-08-16 07:03发布

问题:

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">
             &#x2716;
    </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>

回答1:

You could use closures through inner functions:

  function createModal() {
   //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);

 }

 window.onclick = () => {
    createModal();
    createModal();
 };