Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.02.2021, 16:22
Новичок на форуме
Отправить личное сообщение для Равиль Посмотреть профиль Найти все сообщения от Равиль
 
Регистрация: 07.02.2021
Сообщений: 2

Закрытие попапа с затуханием
Прошу помощи у знатоков, как сделать затухание при закрытии попапа?
https://codepen.io/ravil377/pen/ZEBWoVm
Ответить с цитированием
  #2 (permalink)  
Старый 07.02.2021, 17:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,134

Равиль,
<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
.popup {
    height: 0;
    opacity: 0;
    background-color: rgba(0,0,0,0.6);
    transition: .5s, height 0s .5s;
}
.open__popup {
    opacity: 1;
    height: 700px;
    transition: opacity .5s;
}
    </style>
 </head>
<body>
<div class="main">
    <button class="main__button" type="button">Нажмите</button>
        <div class="popup">
        </div>
</div>
<script>
const popup = document.querySelector('.popup');
const mainButton = document.querySelector('.main__button');
function openPopup() {
    popup.classList.toggle("open__popup");
}
mainButton.addEventListener("click", openPopup);
</script>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 07.02.2021, 17:26
Новичок на форуме
Отправить личное сообщение для Равиль Посмотреть профиль Найти все сообщения от Равиль
 
Регистрация: 07.02.2021
Сообщений: 2

Спасибо большое!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как запретить закрытие окна кликом за его пределами? Lefseq Общие вопросы Javascript 1 21.12.2019 11:59
Открытие и закрытие одной кнопкой Jolly Элементы интерфейса 2 01.06.2017 12:24
Закрытие вкладки yriiarutiunian Общие вопросы Javascript 4 20.11.2015 14:44
Закрытие дива, который открывается через document.write Marker Events/DOM/Window 3 20.01.2013 09:07
Событие закрытие браузера ansi_str Javascript под браузер 1 13.07.2012 11:06