<div class="button">
        <a href="#" id="open">Інформація</a>
    </div>
    <div class="modal" id="modal">
        <div class="modal_cont">
            <div class="modal_body" id="modalbody">
                <h1 class="info">Інформація </h1>
                <p class="infoblock">
                    Веб-дизайнер відповідає за оформлення інтернет-проекту, займається не лише візуальною його складовою, а й питаннями зручності користування сайтом . Основне завдання – придумати зовнішній вигляд, оформити проект загалом так, щоб він був найбільш зручним та привабливим для користувачів.
                </p>
                <div class="modalclose" id="close">&#10006</div>
            </div>
        </div>
    </div>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.button {
    margin-top: 40px;
    text-align: center;
}
.button a:hover {
    box-shadow: #00FA9A 0px 0px 15px;
}
.button a {
    background-color: #00FA9A;
    padding: 20px 30px;
    text-decoration: none;
    font-family: "M PLUS Rounded 1c", sans-serif;
    border-radius: 15px;
    font-weight: bold;
    color: #fff;
    text-shadow: #000 0px 0px 15px;
}
.modal {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgb(0, 0, 0, .8);
    z-index: 2;
    /*visibility: hidden;*/
}
.modal.active {
    display: block;
}
.modal_cont {
    display: flex;
    width: 100%;
    height: 100%;
}
.modal_body {
    margin: auto;
    width: 500px;
    background-color: #fff;
    border-radius: 15px;
    text-align: center;
    padding: 100px 15px 0px 15px;
    position: relative;
}
.info {
    font-family: "Moderustic", sans-serif;
    font-size: 30px;
    position: relative;
    bottom: 90px;
    right: 147px;
}
.infoblock {
    font-family: "Moderustic", sans-serif;
    font-size: 20px;
    position: relative;
    bottom: 70px;
    left: 3px;
    text-align: left;
}
.modalclose {
    position: absolute;
    bottom: 294px;
    left: 463px;
    font-size: 19px;
    cursor: pointer;
}
.modalclose:hover {
    text-shadow: #000 0px 0px 15px;
}

const button = document.getElementById('open');
const modalclose = document.getElementById('close');
const modal = document.getElementById('modal');

button.addEventListener('click', function(e){
    e.preventDefault()
    modal.classList.add('active');
})

modalclose.addEventListener('click', () => {
    modal.classList.remove('active');
})