ES6类的JavaScript模态

Question

I am trying to create a modal using es6 classes. A codePen: https://codepen.io/t411tocreate/pen/KomLzo

The idea is to get a button from the dom using data-for-modal attribute, get modal itself searching by data-modal attribute. Then showModal and hideModal methods should be bound to the element created as Modal class instance. Why it doesen't works ?

My JS looks like this:

class Modal {
  constructor(modalName) {
    this.showBtn = document.querySelector(`[data-for-modal=\'${modalName}\']`)
    this.modalWrapper = document.querySelector(`[data-modal=\'${modalName}\']`);
    this.closeBtn = document.querySelector(`[data-modal=\'${modalName}\']`).children[0].children[0].children[1];
  }

  showModal () {
    this.modalWrapper.classList.add('.ui-modal-wrappper.ui-modal-wrappper--active-modal');
  }

  hideModal () {
    this.modalWrapper.classList.remove('.ui-modal-wrappper.ui-modal-wrappper--active-modal');
  }

  this.showBtn.addEventListener('click', this.showModal);
  this.closeBtn.addEventListener('click', this.hideModal);

}

const m1 = new Modal('modal-1');
const m2 = new Modal('modal-2');

Answer 1

Why it doesen't works ?

Because the handler is being bound by a different context this than the context from class Modal .

You need to bind the right context this :

this.showBtn.addEventListener('click', this.showModal.bind(this));
this.closeBtn.addEventListener('click', this.hideModal.bind(this));

The function bind will bind that context this from class Modal and returns a new function bound to the right context.

 class Modal { constructor(modalName) { this.showBtn = document.querySelector(`[data-for-modal=\\'${modalName}\\']`) this.modalWrapper = document.querySelector(`[data-modal=\\'${modalName}\\']`); this.closeBtn = document.querySelector(`[data-modal=\\'${modalName}\\']`).children[0].children[0].children[1]; this.showBtn.addEventListener('click', this.showModal.bind(this)); this.closeBtn.addEventListener('click', this.hideModal.bind(this)); } showModal() { console.log(this.modalWrapper); this.modalWrapper.classList.add('.ui-modal-wrappper.ui-modal-wrappper--active-modal'); } hideModal() { console.log(this.modalWrapper); this.modalWrapper.classList.remove('.ui-modal-wrappper.ui-modal-wrappper--active-modal'); } } const m1 = new Modal('modal-1'); const m2 = new Modal('modal-2'); 

 * { margin: 0; padding: 0; outline: 0; } body { font-family: sans-serif; } .buttons-panel { background: #ccc; margin-top: 50vh; text-align: center; padding: 20px 0; } .ui-show-modal-btn { background: #3b5998; font-size: 1.5em; border: 0; outline: 0; margin: 0 10px; padding: 10px 15px; color: #fff; transition: opacity .3s ease; } .ui-show-modal-btn:hover { cursor: pointer; opacity: .9; } .ui-modal-wrappper { display: none; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(51, 51, 51, 0.7); } .ui-modal-wrappper.ui-modal-wrappper--active-modal { display: flex; } .ui-modal-body { width: 80%; background: #ececec; font-family: Arial, sans-serif; box-shadow: 5px 5px 5px #333; } .ui-modal-body__header, .ui-modal-body__footer { color: #ececec; background: #3b5998; padding: 10px 15px; } .ui-modal-body__header { display: flex; justify-content: space-between; align-items: center; font-size: 1.5em; } .ui-modal-header__title {} .ui-modal-header__close-btn { padding: 5px 0px 5px 15px; transition: .2s ease all; } .ui-modal-header__close-btn:hover { cursor: pointer; opacity: .8; } .ui-modal-body__footer { font-size: 1.3em; text-align: center; } .ui-modal-body__content { padding: 20px 15px; color: #222; text-align: justify; } .ui-modal-body__content p { padding: 0 0 10px 0; } .ui-modal-body__content p:last-child { padding: 0px 0 0px 0; } 

 <div class="buttons-panel"> <button class="ui-btn ui-show-modal-btn" type="button" name="button" data-for-modal="modal-1">Show modal 1</button> <button class="ui-btn ui-show-modal-btn" type="button" name="button" data-for-modal="modal-2">Show modal 2</button> </div> <div class="ui-modal-wrappper" data-modal="modal-1"> <div class="ui-modal-body"> <div class="ui-modal-body__header"> <span class="ui-modal-header__title">Modal 1 header</span> <span class="ui-modal-header__close-btn">x</span> </div> <div class="ui-modal-body__content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="ui-modal-body__footer">Modal footer</div> </div> </div> <div class="ui-modal-wrappper" data-modal="modal-2"> <div class="ui-modal-body"> <div class="ui-modal-body__header"> <span class="ui-modal-header__title">Modal 2 header</span> <span class="ui-modal-header__close-btn">x</span> </div> <div class="ui-modal-body__content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="ui-modal-body__footer">Modal footer</div> </div> </div>