var btn = document.getElementById("button_for_modal_window");
var modal = document.getElementById("modal_window");
var span = document.getElementsByClassName("close_modal_window")[0];
var body = document.querySelector("body");
btn.onclick = function () {
modal.style.display = "block";
body.style.overflow = "hidden";
body.style.marginRight = getScrollbarWidth() + "px";
}
span.onclick = function () {
modal.style.display = "none";
body.style.overflow = "auto";
}
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
body.style.overflow = "auto";
}
}
var getScrollbarWidth = function() {
var div, width = getScrollbarWidth.width;
if (width === undefined) {
div = document.createElement('div');
div.innerHTML = '<div style="width:50px;height:50px;position:absolute;left:-50px;top:-50px;overflow:auto;"><div style="width:1px;height:100px;"></div></div>';
div = div.firstChild;
document.body.appendChild(div);
width = getScrollbarWidth.width = div.offsetWidth - div.clientWidth;
document.body.removeChild(div);
}
return width;
};body.style.marginRight = getScrollbarWidth() + "px";