मेरे पास क्रमशः मोडल दिखाने और छिपाने के लिए एक मॉडल क्लास है। इस वर्ग के अंदर दो कार्य हैं; खोलें और बंद करें()। मैंने इन कार्यों को openModal() फ़ंक्शन से संबंधित किया है और इस फ़ंक्शन को छवि div पर क्लिक करने के लिए जोड़ा है। जब मैं छवि पर क्लिक करता हूं तो मोडल के अंदर एक बड़ी छवि दिखाई देती है, लेकिन जब मैं मोडल को बंद करना चाहता हूं, तो यह मोडल को बंद कर देता है और ओपन () फ़ंक्शन को फिर से चलाता है। तो ऐसा लगता है जैसे क्लोज बटन काम नहीं कर रहा है।

मेरी कक्षा;

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>

मुझे इस मुद्दे पर समीक्षा की जरूरत है।

धन्यवाद एच.

2
Capan 2 जून 2019, 13:43

1 उत्तर

सबसे बढ़िया उत्तर

आपका .button-close .modal-overlay के अंदर है, इसलिए हालांकि उस पर एक क्लिक close फ़ंक्शन को ट्रिगर करेगा, यह open फ़ंक्शन को भी ट्रिगर करेगा क्योंकि क्लिक open पर भी था। .modal-overlay. close फ़ंक्शन में stopPropagation को कॉल करें:

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>

आप इनलाइन हैंडलर के बजाय सभी श्रोताओं को जावास्क्रिप्ट के साथ ठीक से जोड़ने पर विचार कर सकते हैं:

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>
1
CertainPerformance 2 जून 2019, 10:50