Das modale Fenster, auf das Sie gewartet haben. Oder wie Sie ein "Popup" von verschiedenen Schaltflächen eines sauberen JS aus aufrufen

Guten Tag! Mein Name ist Boris Cherepanov, ich entwickle WordPress- und Bitrix-Websites. Ich habe hier an dem Projekt gearbeitet. Eine der Einschränkungen bestand darin, Jquery nicht zu verwenden, und ich musste dasselbe modale Fenster von verschiedenen Schaltflächen aus aufrufen. Eigentlich ist dies eine ziemlich einfache Aufgabe, aber ich entschied mich dafür, ein modales Fenster zu erstellen, das mit dem ersten Klick erstellt wurde, seinen Zustand beibehielt, einen Konstruktor für den Aufruf hatte usw. Und am Ende habe ich es nicht bereut. Ich werde später erklären, warum. Ich habe dieses modale Fenster in eine schlüsselfertige Lösung "verpackt", die Sie jederzeit verwenden können.

Installation


Es ist einfach, ein solches Modal zu installieren. Js-Datei herunterladen und verbinden. Es hängt nicht von Ereignissen oder Bibliotheken ab, sodass Sie sich dort anmelden können, wo Sie es benötigen. Hier ist der Link zu Github

Initialisierung


Auf der Seite, auf der Sie anrufen müssen, schreiben Sie an js:

new XMC({
    bodyID: 'body',
    backgroundLayerID: 'wrapper',
    selector: 'data-type',
    selectorValue: 'openModalForm',
    btnId: 'mfClose',
    content: 'Привет',
    classListBg: ['zuzu', 'zaza'],
    classListBody: ['zuzu', 'zaza2'],
    classListBtn: ['zuzu', 'zaza3'],
    styleBg: {
        top: '0',
        left:'0',
        right: '0',
        bottom: '0',
        position: 'fixed',
        background: '#00000090',
        justifyContent: 'center',
        alignItems: 'center',
        zIndex: '6'
    },
    styleBody: {
        minWidth: '200px',
        minHeight: '200px',
        background: '#ffffff',
        justifyContent: 'center',
        alignItems: 'center',
    },
    btnStyle: {
        width: '40px',
        height: "40px",
        background: '#ffffff',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        position: 'absolute',
        top: '5%',
        right: '5%',
        cursor: 'pointer'
    }
});

Lesen Sie mehr über die Elemente im Objekt.


Es gibt 6 obligatorische Elemente:

  • bodyID ist der Bezeichner des Blocks, der den Inhalt des modalen Fensters enthält
  • backgroundLayerID - die Dimmschicht-ID
  • Selector - HTML-Attribut, das sich auf allen Schaltflächen befindet, die ein modales Fenster verursachen
  • SelectorValue - Selektorwert
  • bntID - id der schließenden taste des modalfensters
  • Inhalt - Text oder HTML im modalen Fenster

Optionale, aber sehr wichtige Punkte:

  • classListBg, classListBody, classListBtn - Klassenarrays für die Abdunkelungsschicht, das Hauptfenster bzw. die Schaltfläche zum Schließen
  • styleBg, styleBody, btnStyle - Objekte mit den Stilen der Abdunkelungsebene, des Hauptfensters bzw. der Schaltfläche Schließen

Ein bisschen über das modalste Fenster


Ich habe bereits gesagt, dass die Hauptaufgabe, die dieses modale Fenster löst, ein Aufruf von mehreren Schaltflächen ist. Das Klicken auf mehrere Schaltflächen, um js aufzurufen, ist ein typisches Beispiel für Delegierung. In XMC (wie ich mein modales Fenster nannte) ist es folgendermaßen implementiert:

XMC.prototype.delegateClick = function () {
    var mf = this;
    window.addEventListener('click', function () {
// Проверяю есть ли у элемента, на который я нажимаю соответствующий атрибут и его значениеif(event.target.hasAttribute(mf.selector) && event.target.getAttribute(mf.selector) === mf.selectorValue ){
               mf.show(); // Показываю модальное окно
               mf.delegateClose(); // Вешаю обработчик на закрытие
           }
    }, mf, false);
};

Dementsprechend müssen Sie sich im Konstruktor registrieren:

var XMC = function (object) {
/* Прочий код */this.delegateClick();
}

Übrigens, zu gegebener Zeit half mir ein Artikel mit Learn Javascript , es herauszufinden . Lesen Sie es wird nützlich sein.

AJAX für das Formular


In meinem „Fall“ musste das Formular über Ajax geladen werden (diese Aufgabe erschien dabei). Dank meiner anfänglichen Vorgehensweise konnte ich viel Zeit sparen. Ich habe mich durch den Prototyp erweitert.

XMC.prototype.ajax = function () {
    var mf = this;
    var data = newObject();
// Немного вырезал, не хочу показывать данные, которые я отправлял
    data = JSON.stringify(data);
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if(this.readyState == 4 && this.status == 200){
            mf.body.innerHTML = this.responseText;
            mf.sendClickDelegate(mf.form);
            mf.i18n();
        }
    };
    xhttp.open('POST', localizationPreloader.adminUrl + "?action=my_action", true);
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhttp.send("data="+data);
    returnthis;
}

Ich hatte diesen Anforderungscode für CMS Wordpress.

Das Ergebnis


Dank des Objektansatzes ist es mir gelungen, nicht nur Pop-Ups zu erstellen, sondern fast eine Webanwendung, in der ich 2 Ajax zum Abrufen und Senden des Formulars habe. Daher musste ich nicht nach neuen Elementen suchen, die verschiedene Selektoren zum Übersetzen oder Arbeiten mit den Daten der Form verwendet haben, die in Ajax „flog“.

Ich hoffe, dass mein Artikel für Sie nützlich ist. Viel Glück!

Jetzt auch beliebt: