<div id="block" style="display:none; padding: 20px; overflow: auto; background-color:#ffffff; width:500px; height:450px;">
$MESSAGE$
</div>
<a class="ulightbox" href="#block">Трек-лист</a>

<h1 style="text-align: center; margin-top: 20px; margin-bottom: 20px;">Модальное окно на чистом CSS</h1>
<div class="container">
    <div style="text-align: center;">
        <a href="#openmazabun_kuverun">Открыть модальное окно</a>
    </div>
    <div id="openmazabun_kuverun" class="mazabun_kuverun">
        <div class="mazabun_kuverun-dialog">
            <div class="mazabun_kuverun-content">
                <div class="mazabun_kuverun-header">
                    <h3 class="mazabun_kuverun-title">ZORNET.RU</h3>
                    <a href="#close" title="Close" class="close">×</a>
                </div>
                
                
                    <div class="mazabun_kuverun-body">
                    Полное отстранение Valve от самой концепции насыщения контента на любом значащем уровне отбрасывает ворота на мошенничество и жестокое обращение. Но эй. Это поможет компании принять более жесткие решения.
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
        var scrollbar = document.body.clientWidth - window.innerWidth + 'px';
        console.log(scrollbar);
        document.querySelector('[href="#openmazabun_kuverun"]').addEventListener('click', function () {
            document.body.style.overflow = 'hidden';
            document.querySelector('#openmazabun_kuverun').style.marginLeft = scrollbar;
        });
        document.querySelector('[href="#close"]').addEventListener('click', function () {
            document.body.style.overflow = 'visible';
            document.querySelector('#openmazabun_kuverun').style.marginLeft = '0px';
        });
    });
</script>

   /* свойства модального окна по умолчанию */
        .mazabun_kuverun {
            position: fixed; /* фиксированное положение */
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.5); /* цвет фона */
            z-index: 1050;
            opacity: 0; /* по умолчанию модальное окно прозрачно */
            -webkit-transition: opacity 400ms ease-in;
            -moz-transition: opacity 400ms ease-in;
            transition: opacity 400ms ease-in; /* анимация перехода */
            pointer-events: none; /* элемент невидим для событий мыши */
        }

        /* при отображении модального окно */
        .mazabun_kuverun:target {
            opacity: 1;
            pointer-events: auto;
            overflow-y: auto;
        }

        /* ширина модального окна и его отступы от экрана */
        .mazabun_kuverun-dialog {
            position: relative;
            width: auto;
            margin: 10px;
        }

        @media (min-width: 576px) {
            .mazabun_kuverun-dialog {
                max-width: 500px;
                margin: 30px auto;
            }
        }

        /* свойства для блока, содержащего контент модального окна */
        .mazabun_kuverun-content {
            position: relative;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
            background-color: #fff;
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
            border: 1px solid rgba(0, 0, 0, .2);
            border-radius: .3rem;
            outline: 0;
        }

        @media (min-width: 768px) {
            .mazabun_kuverun-content {
                -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
                box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
            }
        }

        /* свойства для заголовка модального окна */
        .mazabun_kuverun-header {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: justify;
            -webkit-justify-content: space-between;
            -ms-flex-pack: justify;
            justify-content: space-between;
            padding: 15px;
            border-bottom: 1px solid #eceeef;
        }

        .mazabun_kuverun-title {
            margin-top: 0;
            margin-bottom: 0;
            line-height: 1.5;
            font-size: 1.25rem;
            font-weight: 500;
        }

        /* свойства для кнопки "Закрыть" */
        .close {
            float: right;
            font-family: sans-serif;
            font-size: 24px;
            font-weight: 700;
            line-height: 1;
            color: #000;
            text-shadow: 0 1px 0 #fff;
            opacity: .5;
            text-decoration: none;
        }

        /* свойства для кнопки "Закрыть" при нахождении её в фокусе или наведении */
        .close:focus, .close:hover {
            color: #000;
            text-decoration: none;
            cursor: pointer;
            opacity: .75;
        }

        /* свойства для блока, содержащего основное содержимое окна */
        .mazabun_kuverun-body {
            position: relative;
            -webkit-box-flex: 1;
            -webkit-flex: 1 1 auto;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            padding: 15px;
            overflow: auto;
        }