Задать вопрос
@LI4NOOST
javascript

Popup menu не закрывается. Как лучше поступить?

Всех приветствую. Начал изучать js буквально пару дней назад. Столкнулся с трудностью. Создал блок с popup меню. Написал функцию, что при нажатии на кнопку в header popup открывается. Теперь не знаю, как правильно написать, что бы он закрывался при нажатии на кнопку "сохранить" или при нажатии на пустое место. Заранее спасибо огромное, кто ответил

<body class="page">
    <header class="header">
        <img class="logo" src="./images/__logo.png">
        <ul class="header__links">
            <a class="russian__lang-link lang-link" href="#">Ru</a>
            <a class="english__lang-link lang-link" href="#">En</a>
        </ul>
    </header>
    <section class="menu">
        <h2 class="menu__title">Редактировать профиль</h2>
        <article class="menu__logs">
            <p class="name"></p>
            <p class="subname"></p>
            <button class="menu__button"><h2 class="botton__text">Сохранить</h2></button>
        </article>
    </section>
    <main class="content">
        <section class="cover">
            <a href="https://stampsy.com/na-elektrichkakh-do-baikala"> 

            </a>
                <h2 class="cover__title">До Байкала &#171;на&nbsp;собаках&#187;</h2>
                <p class="cover__subtitle">По мотивам учебной темы о Транссибе — путешествие от столицы до Байкала на
                    электричках.</p>
            </section>
            
</main>
<script src="/script.js"><script>
</body>

.menu {
    display: none;
    margin: 50px auto;
    border-radius: 10px;
    background: white;
    width: 282px;
    height: 322px;
}

let page = document.querySelector ('.page');
let header = page.querySelector ('.header');
let headerLinks = header.querySelector ('.header__links');
let menuButton = header.querySelector ('.russian__lang-link')
let menu = document.querySelector ('.menu')
function addMenu () {
menu.style.display = 'block'
}
menuButton.addEventListener ('click', addMenu)
  • Вопрос задан
  • 132 просмотра
2 комментария
Подписаться 1 Простой 2 комментария
Решения вопроса 1
@todaystudio
Можно добавить overlay, на который повесить обработчик события.
Добавляем overlay: 
<div class="overlay">
<div class="menu">
//code...
</div>
</div>


И добавляем скрипт на закрытие:
function addMenu () {
menu.style.display = 'block'
overlay.style.display = 'block'
overlay.addEventListener('click', closeMenu)
}
function closeMenu(e) {
if (e.target.classList.contains('overlay')) {
menu.style.display = 'none'
overlay.style.display = 'none'
overlay.removeEventListener('click')
}
}


То есть, мы вешаем слушатель клика по overlay и проверяем кликнули ли по самому overlay или по попапу. Если по overlay, то закрываем overlay и попап.

Ну и, конечно, лучше оперировать классами в этом случае, а не стилями. Классами проще, и проще анимировать все это дело.
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
summer • Ярославль
от 100 000 до 140 000 ₽
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
Мэтч
от 80 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Доработать вебпроект со стеком: yii2, jquery, vue
19 апр. 2024, в 13:06
6000 руб./за проект
Правки и доработки CRM системы PHP, JS, Smarty,
19 апр. 2024, в 13:03
1500 руб./в час
Доработка сайта на Yii 2.0
19 апр. 2024, в 13:00
999 руб./за проект
Ещё заказы