La fenêtre modale que vous attendiez. Ou comment appeler une fenêtre contextuelle à partir de différents boutons sur JS pur

Bon après-midi Mon nom est Boris Cherepanov, je développe des sites Web sur wordpress et bitrix. J'ai travaillé sur le projet ici. L'une des limitations était de ne pas utiliser jquery, mais j'ai dû appeler la même fenêtre modale à partir de différents boutons. En fait, c'est une tâche assez simple, mais j'ai décidé d'aller de l'avant et de créer une fenêtre modale qui serait créée au premier clic, enregistrer son état, avoir un constructeur à appeler, etc. Et au final, je ne l'ai pas regretté. J'expliquerai pourquoi plus tard. J'ai «enveloppé» cette fenêtre modale dans une solution clé en main qui peut être utilisée en permanence.

L'installation

L'installation d'un tel "modal" est simple. Téléchargez le fichier js et connectez-vous. Il ne dépend d'aucun événement ou bibliothèque, vous pouvez donc vous connecter là où vous en avez besoin. Voici le lien sur github

Initialisation

Sur la page sur laquelle vous devez appeler, écrivez en 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' } }); 

En savoir plus sur les éléments d'un objet

Il y a 6 points requis:

• bodyID est l'identifiant du bloc qui contiendra le contenu de la fenêtre modale
• backgroundLayerID - identifiant de la couche de gradation
• selector - attribut html qui sera sur tous les boutons qui provoquera une fenêtre modale
• selectorValue - valeur du sélecteur
• bntID - id du bouton pour fermer la fenêtre modale
• contenu - texte ou html dans une fenêtre modale

Points facultatifs mais très importants:

• classListBg, classListBody, classListBtn - tableaux de classes pour la couche de gradation, la fenêtre principale et le bouton de fermeture, respectivement
• styleBg, styleBody, btnStyle - objets avec les styles du calque de gradation, de la fenêtre principale et du bouton de fermeture, respectivement

Un peu sur la fenêtre modale elle-même

J'ai déjà dit que la tâche principale que résout cette fenêtre modale est un appel à partir de plusieurs boutons. Cliquer sur plusieurs boutons pour appeler js est un exemple typique de délégation et dans XMC (comme j'ai appelé ma fenêtre modale), il est implémenté comme ceci:

 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); }; 

En conséquence, dans le constructeur, vous devez vous inscrire:

 var XMC = function (object) { /*   */ this.delegateClick(); } 

Soit dit en passant, à un moment donné, un article avec learn javascript m'a aidé à y faire face. Il vous sera utile de vous familiariser avec celui-ci.

AJAX pour la forme

Dans mon «cas», il était nécessaire de charger le formulaire en utilisant ajax (cette tâche est apparue dans le processus). Grâce à mon approche initiale, j'ai réussi à gagner un peu de temps. J'ai développé le prototype.

 XMC.prototype.ajax = function () { var mf = this; var data = new Object(); //  ,    ,    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); return this; } 

J'avais un tel code de demande pour CMS Wordpress.

Résumé

En conséquence, grâce à l'approche objet, j'ai réussi à faire non seulement des pop-ups, mais presque une application web dans laquelle j'ai 2 ajax pour recevoir le formulaire et soumettre, traduction spécifique au navigateur, lecture des cookies, chargement de l'animation. Grâce à cela, je n'ai pas eu à chercher de nouveaux éléments par divers sélecteurs pour traduire ou travailler avec les données du formulaire qui sont «arrivées» par ajax.

J'espère que vous trouverez mon article utile. Bonne chance