The modal window that you were waiting for. Or how to call a "pop-up" from different buttons on a clean 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. I will explain why later. I “wrapped” this modal window into a turnkey solution that you can use all the time.

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

Details about 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 - the dimming 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 the 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 = 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;
}

I had this request code for CMS Wordpress.

Total

As a result, thanks to the object approach, I managed to make not just pop-ups, 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 to translate or work with the data of the form that “flew” in ajax.

I hope that my article will be useful for you. Good luck!