函数式 JavaScript 编程 - 制作模态框、弹出框并重构它

Question

我正在使用 ES5。我正在学习 JavaScript。

我做了这个模态，但我想重构那里的代码，我很确定有更好的方法来做到这一点。

如果我添加 5 个模态，代码如何知道哪个模态是哪个？我怎样才能添加该功能呢？我想这与 id 有关，但那将如何是动态的？还是更多的 OOP JS？

这是codepen中的代码-https://codepen.io/lovetocodex/pen/mpxmjY

尽管我设置了不透明度和过渡，但模态似乎有点弹出不那么平滑 - 但是它会顺利消失。

JS代码：

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);

}

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>

Answer 1

你可以通过内部函数使用闭包：

  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();
 };