@MaKsCrIzIs

Не работает модальное окно, что делать?

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="Style.css">
    <link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&family=Moderustic:wght@300..800&display=swap" rel="stylesheet">
    <title>JS-ONE</title>
</head>
<body>
    <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>
    <script src="JavaScript.jsg"></script>
</body>
</html>


CSS
* {
    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;
}


JS
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');
})
  • Вопрос задан
  • 120 просмотров
Решения вопроса 3
Уберите visibility: hidden из класса modal
.modal {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgb(0, 0, 0, .8);
    z-index: 2;
}
Ответ написан
Комментировать
IvanU7n
@IvanU7n
nothing interesting here
лишний visibility: hidden;
Ответ написан
Комментировать
@MaKsCrIzIs Автор вопроса
Всем спасибо, ошибка была бонально проста, в строчке подключения js, случайно добавил букву и js просто не был подключён.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы