The modal window that you were waiting for. Or how to call a "pop-up" from different buttons on a pure JS
Good day! My name is Boris Cherepanov, I develop wordpress and bitrix websites. I worked on the project here. One of the limitations was not to use jquery, and I needed to call the same modal window from different buttons. Actually, this is a fairly simple task, but I decided to go ahead and make a modal window that would be created with the first click, preserved its state, had a constructor for the call, etc. And in the end I did not regret. Let me explain why later. I “wrapped” this modal window into a turnkey solution that you can use all the time.
It is easy to install such a modal. Download js-file and connect. It does not depend on any events or libraries, so you can connect where you need it. Here is the link to github
On the page where you need to call you write to js:
There are 6 mandatory items:
')
Optional, but very important points:
I have already said that the main task that this modal window solves is a call from several buttons. Clicking on several buttons to call js is a typical example of delegation, and in XMC (as I called my modal window), it is implemented like this:
Accordingly, in the constructor you need to register:
By the way, in due time, an article with learn javascript helped me figure it out. Read it will be useful.
In my “case” it was necessary to load the form via ajax (this task appeared in the process). Thanks to my initial approach, I managed to save a lot of time. I expanded through the prototype.
I had this request code for CMS Wordpress.
As a result, thanks to the object approach, I managed to make not just pop-up windows, but almost a web application in which I have 2 ajax to get the form and send, transfer depending on the browser, read the cookie, download animation. Thanks to this, I didn’t have to look for new elements using different selectors for translating or working with the data of the form that “flew” in ajax.
I hope that my article will be useful for you. Good luck!
Installation
It is easy to install such a modal. Download js-file and connect. It does not depend on any events or libraries, so you can connect where you need it. Here is the link to github
Initialization
On the page where you need to call you write to 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' } }); Read more about the items in the object.
There are 6 mandatory items:
')
- bodyID is the identifier of the block that will contain the content of the modal window
- backgroundLayerID - dim layer id
- selector - html attribute that will be on all buttons that will cause a modal window
- selectorValue - selector value
- bntID - id of the closing button of the modal window
- content - text or html inside the modal window
Optional, but very important points:
- classListBg, classListBody, classListBtn - class arrays for the darkening layer, the main window and the close button, respectively
- styleBg, styleBody, btnStyle - objects with styles of the darkening layer, the main window and the close button, respectively
Little about the most modal window
I have already said that the main task that this modal window solves is a call from several buttons. Clicking on several buttons to call js is a typical example of delegation, and in XMC (as I called my modal window), it is implemented like this:
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); }; Accordingly, in the constructor you need to register:
var XMC = function (object) { /* */ this.delegateClick(); } By the way, in due time, an article with learn javascript helped me figure it out. Read it will be useful.
AJAX for the form
In my “case” it was necessary to load the form via ajax (this task appeared in the process). Thanks to my initial approach, I managed to save a lot of time. I expanded through the 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; } I had this request code for CMS Wordpress.
Total
As a result, thanks to the object approach, I managed to make not just pop-up windows, but almost a web application in which I have 2 ajax to get the form and send, transfer depending on the browser, read the cookie, download animation. Thanks to this, I didn’t have to look for new elements using different selectors for translating or working with the data of the form that “flew” in ajax.
I hope that my article will be useful for you. Good luck!
Source: https://habr.com/ru/post/430432/
All Articles