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.
 
link to github
 
 

Initialization 3r3204.
 
On the page where you need to call you write to js:
 
 
3r33175. 3r3176. new XMC ({
bodyID: 'body',
backgroundLayerID: ',' wrapper ',
selector:' data-type ',
selectorValue:' openModalForm ',
btnId:' mfClose " 'Hello',
ClassListBg:['zuzu', 'zaza'],
ІрListBody:['zuzu', 'zaza2'],
Iрrrr:['zuzu', 'zaza3'],
StyleBg: {
Top: '0',
'0',
Bottom: '0',
Position: 'fixed',
Background: '# 00000090',
JustifyContent: 'center',
AlignItems: 'center',
ZIndex: ' 6 '
},
StyleBody: {
MinWidth:' 200px ',
MinHeight:' 200px ',
Background:' #ffffff ',
JustifyContent:' center ',
. ',
},
BtnStyle: {
W idth: '40px',
height: "40px",
background: '#ffffff',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
position: 'absolute',
top: '5%',
right: '5%',
cursor: 'pointer'
}
});
3r3195. 3r3196.
 
3r375. Read more about points in facility 3r3r76.
 
There are 6 mandatory points:
 
 
3r31-10.  
3r3115. The bodyID is a block identifier that will contain the content of the modal window 3r3116.  
3r3115. backgroundLayerID - id of the darkening layer
 
3r3115. selector - html attribute that will be for all buttons that will call the modal window
 
3r3115. selectorValue - the value of the selector
 
3r3115. bntID - id of the button for closing the modal window
 
3r3115. content - text or html inside the
modal window.  
3r3118.
 
Optional, but very important points: 3r3209.  
 
3r31-10.  
3r3115. classListBg, classListBody, classListBtn - arrays of classes for the darkening layer, the main window and the close button, respectively 3r3116.  
3r3115. styleBg, styleBody, btnStyle are objects with the styles of the darkening layer, the main window and the close button, respectively
 
3r3118.
 
A little about the most modal window 3r3204.
 
I have already said that the main task that this modal window solves is a challenge 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 as follows: 3r3209.  
 
3r33175. 3r3176. XMC.prototype.delegateClick = function () {3r-3217. var mf = this;
window.addEventListener ('click', function () {
//Check if the element I click on has the corresponding attribute and its value 3r33217. if (event.target.hasAttribute (mf.selector) && event.target. getAttribute (mf.selector) === mf.selectorValue) {
mf.show (); //I show the modal window
mf.delegateClose (); //I hang up the handler to close
}
}, mf, detrocteClose (); //I hang up the handler for closing
}
}, mf, detr ateate close (); false);
};
3r3195. 3r3196.
 
Accordingly, in the designer you need to register:
 
 
3r33175. 3r3176. var XMC = function (object) {
/* Other code * /
this.delegateClick ();
}
3r3195. 3r3196.
 
By the way, at one time, an article with helped me figure it out. learn jаvascript . 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.
 
 
3r33175. 3r3176. XMC.prototype.ajax = function () {
var mf = this;
var data = new Object ();
//Cut out a bit, I don’t want to show the data I sent to
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;
}
3r3195. 3r3196.
 
I had this request code for CMS Wordpress.
 
 

The result is


 
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 for getting a form and sending, translating depending on the browser, reading a cookie, loading 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!
+ +1 -

Add comment