Guten Tag! Mein Name ist Boris Cherepanov, ich entwickle Websites auf WordPress und Bitrix. Ich habe hier an dem Projekt gearbeitet. Eine der Einschränkungen war, keine jquery zu verwenden, aber ich musste dasselbe modale Fenster über verschiedene Schaltflächen aufrufen. Eigentlich ist dies eine ziemlich einfache Aufgabe, aber ich habe beschlossen, ein modales Fenster zu erstellen, das beim ersten Klick erstellt wird, seinen Status speichert, einen Konstruktor zum Aufrufen hat 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 „eingewickelt“, die ständig verwendet werden kann.
Installation
Die Installation eines solchen "Modals" ist einfach. Laden Sie die js-Datei herunter und stellen Sie eine Verbindung her. Es hängt nicht von Ereignissen oder Bibliotheken ab, sodass Sie eine Verbindung herstellen können, wo Sie sie benötigen. Hier ist der
Link auf GithubInitialisierung
Auf der Seite, auf der Sie anrufen müssen, schreiben Sie in 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' } });
Weitere Informationen zu Elementen in einem Objekt
Es sind 6 Punkte erforderlich:
- bodyID ist die Kennung des Blocks, der den Inhalt des modalen Fensters enthält
- backgroundLayerID - ID der Dimmschicht
- Selektor - HTML-Attribut, das sich auf allen Schaltflächen befindet, die ein modales Fenster verursachen
- selectorValue - Selektorwert
- bntID - ID der Schaltfläche zum Schließen des Modalfensters
- Inhalt - Text oder HTML in einem modalen Fenster
Optionale, aber sehr wichtige Punkte:
- classListBg, classListBody, classListBtn - Klassenarrays für die Dimmschicht, das Hauptfenster bzw. die Schaltfläche zum Schließen
- styleBg, styleBody, btnStyle - Objekte mit den Stilen der Dimmschicht, des Hauptfensters bzw. der Schaltfläche zum Schließen
Ein wenig über das modale Fenster selbst
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 zum Aufrufen von js ist ein typisches Beispiel für die Delegierung. In XMC (wie ich mein modales Fenster genannt habe) wird es folgendermaßen implementiert:
XMC.prototype.delegateClick = function () { var mf = this; window.addEventListener('click', function () {
Dementsprechend müssen Sie sich im Konstruktor registrieren:
var XMC = function (object) { this.delegateClick(); }
Übrigens hat mir einmal ein Artikel mit
Javascript geholfen, damit umzugehen. Es wird nützlich sein, sich damit vertraut zu machen.
AJAX für Form
In meinem "Fall" war es notwendig, das Formular mit Ajax zu laden (diese Aufgabe erschien dabei). Dank meines anfänglichen Ansatzes konnte ich viel Zeit sparen. Ich habe durch den Prototyp erweitert.
XMC.prototype.ajax = function () { var mf = this; var data = new Object();
Ich hatte einen solchen Anforderungscode für CMS Wordpress.
Zusammenfassung
Dank des Objektansatzes gelang es mir, nicht nur Popups zu erstellen, sondern fast eine Webanwendung, in der ich 2 Ajax zum Empfangen des Formulars und zum Senden, zur browserspezifischen Übersetzung, zum Lesen von Cookies und zum Laden von Animationen habe. Dank dessen musste ich nicht nach verschiedenen Elementen verschiedener Selektoren suchen, um die Daten des Formulars zu übersetzen oder damit zu arbeiten, das von Ajax „angekommen“ war.
Ich hoffe, Sie finden meinen Artikel hilfreich. Viel Glück