Question

我有一个模态类来分别显示和隐藏模态。该类内部有两个功能： open（）和close（）。我已经将这些函数与openModal（）函数相关联，并将此函数添加到图像div的onclick中。当我单击图像时，模态内部显示了更大的图像，但是当我想关闭模态时，它关闭了模态并再次运行open（）函数。因此，似乎关闭按钮不起作用。

我的课程；

class Modal {
    constructor(overlay) {
        this.overlay = overlay;
        const closeButton = overlay.querySelector('.button-close')
        closeButton.addEventListener('click', this.close.bind(this));
        overlay.addEventListener('click', e => {
            this.close();
        });
    }
    open() {
        this.overlay.classList.remove('is-hidden');
    }
    close() {
        this.overlay.classList.add('is-hidden');
    }
}

我如何在main.js内调用此功能

const modal = new Modal(document.querySelector('.modal-overlay'));
window.openModal = modal.open.bind(modal);

图像div

<div onClick="openModal()" class="item3"><img style='height: 100%; width: 100%; object-fit: contain' id="${id}" src="${namImage}">
  <div class="is-hidden modal-overlay">
    <div class="image-modal">
       <span class="button-close">×</span>
      <img src="${namImage}" width="95%">
    </div>
  </div>
</div>

我需要对此问题进行审查。

谢谢

Answer 1

您的.button-close位于.modal-overlay内，因此尽管单击将触发close函数，但也会触发open函数，因为单击也是在.modal-overlay上。在stopPropagation函数中调用close：

close(e) {
    e.stopPropagation();
    this.overlay.classList.add('is-hidden');
}

class Modal {
    constructor(overlay) {
        this.overlay = overlay;
        const closeButton = overlay.querySelector('.button-close')
        closeButton.addEventListener('click', this.close.bind(this));
        overlay.addEventListener('click', e => {
            this.close();
        });
    }
    open() {
        this.overlay.classList.remove('is-hidden');
    }
    close(e) {
        e.stopPropagation();
        this.overlay.classList.add('is-hidden');
    }
}

const modal = new Modal(document.querySelector('.modal-overlay'));
window.openModal = modal.open.bind(modal);

.is-hidden {
  display: none;
}

<div onClick="openModal()" class="item3"><img style='height: 100%; width: 100%; object-fit: contain' id="${id}" src="${namImage}">
  <div class="is-hidden modal-overlay">
    <div class="image-modal">
       <span class="button-close">× (CLICK TO CLOSE)</span>
      <img src="${namImage}" width="95%">
    </div>
  </div>
</div>

您还可以考虑使用Javascript而非内联处理程序正确地附加所有侦听器：

class Modal {
    constructor(overlay) {
        this.overlay = overlay;
        const closeButton = overlay.querySelector('.button-close')
        closeButton.addEventListener('click', this.close.bind(this));
        overlay.addEventListener('click', e => {
            this.close();
        });
    }
    open() {
        this.overlay.classList.remove('is-hidden');
    }
    close(e) {
        e.stopPropagation();
        this.overlay.classList.add('is-hidden');
    }
}

const modal = new Modal(document.querySelector('.modal-overlay'));
modal.overlay.parentElement.onclick = modal.open.bind(modal);

.is-hidden {
  display: none;
}

<div class="item3"><img style='height: 100%; width: 100%; object-fit: contain' id="${id}" src="${namImage}">
  <div class="is-hidden modal-overlay">
    <div class="image-modal">
       <span class="button-close">× (CLICK TO CLOSE)</span>
      <img src="${namImage}" width="95%">
    </div>
  </div>
</div>

Answer 2

尝试

c1

class Modal {
    open(mod) {
        mod.querySelector('.modal-overlay').classList.remove('is-hidden');
    }
    close(e) {
        e.stopPropagation();
        e.target.parentNode.parentNode.classList.add('is-hidden');
    }
}

const modal = new Modal();

处理多模式案件

.is-hidden { display: none; }

<div onClick="modal.open(this)" class="item3"><img style='height: 100%; width: 100%; object-fit: contain' id="'${id}'" src="${namImage}">
  Click me to open modal
  <div class="is-hidden modal-overlay">
    <div class="image-modal">
       <span class="button-close" onclick="modal.close(event)">× click here to close</span>
      <img src="${namImage}" width="95%">
    </div>
  </div>
</div>

class Modal {
    open(mod) {
        mod.querySelector('.modal-overlay').classList.remove('is-hidden');
    }
    close(e) {
        e.stopPropagation();
        e.target.parentNode.parentNode.classList.add('is-hidden');
    }
}

const modal = new Modal();

Javascript意外地在类内执行函数

2 个答案: