Как сделать плавное закрытие попапа css
Добавил пользователь Алексей Ф. Обновлено: 04.10.2024
Узнать, как создать модальное окно с помощью CSS и JavaScript.
Создать модальное окно
Модаль - это диалоговое окно/всплывающее окно, которое отображается в верхней части текущей страницы:
Модальный заголовок
Модальный нижний колонтитул
Шаг 1) Добавить HTML:
Пример
Некоторый текст в модальном..
The Modal Part
with class="modal" is a container element for the modal and the div with class="modal-content" is where you put your modal content (headings, paragraphs, images, etc).
The element with class="close" should be used to close the modal.
Шаг 2) Добавить CSS:
Пример
/* Модальный (фон) */
.modal display: none; /* Скрыто по умолчанию */
position: fixed; /* Оставаться на месте */
z-index: 1; /* Сидеть на вершине */
left: 0;
top: 0;
width: 100%; /* Полная ширина */
height: 100%; /* Полная высота */
overflow: auto; /* Включите прокрутку, если это необходимо */
background-color: rgb(0,0,0); /* Цвет запасной вариант */
background-color: rgba(0,0,0,0.4); /* Черный с непрозрачностью */
>
.close:hover,
.close:focus color: black;
text-decoration: none;
cursor: pointer;
>
The .modal class represents the window BEHIND the actual modal box. The height and width is set to 100%, which should create the illusion of a background window.
Добавить a black background color with opacity.
Set position to fixed; meaning it will move up and down the page when the user scrolls.
It is hidden by default, and should be shown with a click of a button (we'll cover this later).
The .modal-content class
This is the actual modal box that gets focus. Do whatever you want with it. We have got you started with a border, some padding, and a background color. The margin: 15% auto is used to push the modal box down from the top (15%) and centering it (auto).
We also set the width to 400px - this could be more or less, depending on screen size. We will cover this later.
The .close class
The close button is styled with a large font-size, a specific color and floats to the right. We have also added some styles that will change the color of the close button when the user moves the mouse over it.
Шаг 3) Добавить JavaScript:
Пример
// Получить модальный
var modal = document.getElementById("myModal");
// Получить кнопку, которая открывает модальный
var btn = document.getElementById("myBtn");
// Получить элемент , который закрывает модальный
var span = document.getElementsByClassName("close")[0];
// Когда пользователь нажимает на кнопку, откройте модальный
btn.onclick = function() modal.style.display = "block";
>
// Когда пользователь нажимает на (x), закройте модальное окно
span.onclick = function() modal.style.display = "none";
>
// Когда пользователь щелкает в любом месте за пределами модального, закройте его
window.onclick = function(event) if (event.target == modal) modal.style.display = "none";
>
>
Добавить верхний и нижний колонтитулы
Добавить класс для модального заголовка, модального тела и модального нижнего колонтитула:
Модальное окно всегда отображается поверх текущей страницы.
Классы W3.CSS Modal
W3.CSS включает в себя следующие классы:
| Класс | Определение |
| w3-modal | Модальный контейнер |
| w3-modal-content | Содержимое модального окна |
Создание модального окна
В качестве содержимого модального окна может быть использован любой HTML-элемент ( блок div , header , абзац, изображение, и т.д. ).
Открытие модального окна
Чтобы открыть модальное окно на CSS , можно использовать любой HTML-элемент . Чаще всего это кнопка или ссылка. Добавьте атрибут onclick и укажите идентификатор модального окна ( в нашем примере это id01 ), используя метод document.getElementById() .
Закрытие модального окна
Чтобы закрыть модальное окно, добавьте класс w3-closebtn к элементу с атрибутом onclick , указывающим на идентификатор модального окна ( id01 ). Также можно закрыть модальное окно, кликнув мышкой за его пределами ( смотрите пример, приведенный ниже ).
Модальные шапка и подвал
Используйте классы w3-container для создания различных разделов внутри модального контента:
Плавное появление окна
Подскажите пожалуйста код плавного появления окна при загрузке программы.
Появление модального окна при нажатии кнопки
Здравствуйте, я совсем новичёк в js - программировании, поэтому обращаюсь за советом на форум. .
Появление модального окна при заходе на страницу
Сейчас оно запускается кликом, помогите изменить чтобы открывалось при заходе и без задержки.
Нужно сделать автоматическое появление модального окна
Доброго всем времени суток. Есть такого рода задачка. Пишу сайт. На нём при входе сразу.
Решение
Плавное появление окна на экране
Доброе время суток. Скажи как сделать так что бы программа открывалась вот так. Видео в Архиве.
Плавное появление окна ввода комментария
При нажатии на эту кнопку резко появляется окно ввода комментария, как сделать чтоб оно появлялось.
Как сделать появление модального окна после просмотра видео?
Мне нужно что бы после просмотра видео открывалось модальное окно. Но только в том случае если.
Появление текста с задержкой
Часть кода программы, в которой после нажатия кнопки старт начинается отсчёт на чёрном фоне.
Плавное появление
Как можно сделать что бы при нажатии на кнопку, плавно появлялся объект? И возможно ли это вообще?
Привет друзья, в этому году меня несколько раз просили объяснить, как сделать модальное окно на сайте. Кто-то, изучая азы веб-разработки неизбежно приходил к ситуации, когда часть контент необходимо отобразить в модальном окне, кто-то, работая с формами, хочет показать ее не в открытом виде, а в pop-up при клике на кнопку.
Несмотря на то, что на блоге уже были статьи, косвенно связанные с реализацией этого эффекта, вопросы все равно остаются и я решил сделать несколько статей, связанных с этой темой. Сегодня разберемся просто с модальными окнами, а в следующий раз сделаем пульсирующую кнопку в углу экрана, как у сервисов обратного звонка и еще просили урок с анимацией блика на кнопке.
Все это выйдет друг за другом. Конечно, это статьи, ориентированные на новичков, и мастодонтам они будут не очень интересны, но тем, кто использует блог как справочник, возможно, пригодятся эти наработки, чтобы быстро реализовывать тот или иной эффект, не описывая одно и тоже каждый раз в новом проекте и сэкономят немного времени. Приступим.
Чтобы статья получилась максимально полной, будем придерживаться следующего плана и сделаем:
- модальное окно с использованием jQuery.
- Простое модальное окно с использованием чистого js.
Конечно же я покажу как вызывать несколько модальных окно на станице, так как это тоже один из частых вопросов, возникающих у новичков. Разберем возможность закрытия окна при клике вне области контента, решим проблему вертикальной прокрути и другие нюансы, которые возникнут в ходе работы или о которых сообщите вы в комментариях.
Структура проекта для понимания какие файлы и где находятся.
Начнем с разметки. Для создания модального окна я обычно пользуюсь такой структурой.
Где "modal" — это затемненный фон, а "modal__content" - область контента. При этом, когда срабатывает триггер, вызывающий окно, например нажатие кнопки, то к "modal" добавляется класс "modal_active", который дает понять, что модальное окно находится в открытом состоянии. Добавляя или удаляя "modal_active" мы будем открывать или скрывать модальное окно манипулирую стилями.
Большинству читающих нужна будет форма в модальном окне. Можно использовать эту.
Я, для примера, просто выведу текст:
Создал простейшую шапку сайта с кнопкой обратного звонка, которая должна вызвать модальное окно. Классический пример любого лендинга.
Давайте добавим немного стилей и приведем в порядок открытое состояние модалки. Вот, что получилось у меня.
Обратите внимание, что в правом углу контентной области модального окна появилась кнопка с изображением крестика. Файл лежит в папке "img", рядом с папкой "js" и "css".
Тут нас больше всего интересует класс ".modal". Как я и говорил, это само модальное окно с полупрозрачным фоном. Давайте подробнее разберем что там за стили.
Первым делом "вырвем" из потока блок с модальным окном при помощи фиксированного позиционирования. Затем, при помощи свойств "top", "left", "right", "bottom" растянем модальное окно по ширине на весь экран. Z-index - нужен для того, чтобы расположить окно над всеми элементами. Если у кого-то другого элемента значение этого свойства будет выше, то модальное окно не перекроет его.
Далее задаю цвет фона модального окна.
Цвет задаю в RGBA формате. Первые 3 цифры — это цвет, а последняя — прозрачность. Где ".9" — это прозрачность в 90%.
Далее использую flexbox для центрирования элемента "modal__content" внутри "modal", задаю возможность вертикальной прокрутки и внутренние отступы.
Окно прекрасно смотрится, но есть одно "но!". Помните я говорил, что активное состояния модального окна, это когда у нас есть класс "modal_active", а без этого класса, окно закрыто? Сейчас мы доведем до ума эту концепцию. Суть в том, чтобы при "modal" сделать окно скрытым, а при "modal_active" - показать.
Давайте создадим этот класс в стилях и настроим отображение окна только при его наличии.
Для показа/скрытия окна будем пользоваться "visibility", "opacity", "position" и свойство "transition" для плавности анимации появления.
Если еще подробнее, то сначала зададим нулевую прозрачность, а при помощи абсолютного позиционирования и свойства "top" уберем модальное окно за пределы видимости. Дополнительно, для надежности, при помощи свойства "visibility" скроем разметку окна.
В момент, когда появится класс "modal_active" инвертируем "visibility" и "opacity", а также поменять "position" и положение в свойстве "top".
Звучит страшнее, чем кажется, на сам деле все довольно просто.
Теперь в таком состоянии окно скрыто:
А в таком, окно открыто:
Попробуйте добавить вручную и убедиться, что окно успешно появляется.
Пол дела сделали, осталось добавлять этот класс модальному окну при клике по кнопке. Тут подход и разделится. Первый вариант сделаем с использованием jQuery, а второй без него на чистом js.
Но прежде нужно подключить файл скриптов к нашей html страничке. Делается это так:
Вызов модального окна при помощи jQuery
Исходник модального окна с использованием jQuery
Первым делом нужно подключить сам jQuery, перед скриптом, который мы добавили чуть выше. То есть порядок подключения должен быть таким:
Как и условились ранее, вызов окна будет происходить при клике на кнопку в шапке. Давайте обработаем это событие, предварительно объявив в файле "scripts.js", что весь код написанный в нем должен исполняться после загрузки страницы.
Инструменты разработчика можно открыть командой ctrl+shift+i, в некоторых браузерах клавишей f12 или через меню.
Теперь давайте добавим класс "modal_active" нашему модальному окну, а при клике на кнопку с крестиком удалим его.
Попробуйте, смотрится совсем не плохо.
Теперь давайте реализуем функционал, когда модальное окно закрывается при клике, вне области контента этого окна. Делается это довольно просто.
Проверяйте, все должно отлично работать.
Теперь давайте разберем небольшой нюанс. Когда у вас страница наполнится контентом, то неизбежно появится вертикальная прокрутка.
При этом мы сделали так, чтобы если контент не помещается в модальное окно в нем тоже появлялась прокрутка. В таком случае смотрится это не очень красиво и нужно от этого избавляться.
Делается это довольно просто. При вызове окна мы просто уберем у тега "body" возможность прокрути. А когда окно будет закрываться, вернем все все на место.
Можно пойти 2 путями: менять стили прямо в js или создать специальный класс для тега body, который и будем убирать прокрутку. Я, обычно, пользуюсь вторым способом.
Давайте в таблице создадим класс ".hidden" и пропишем ему "overflow", запрещающий прокрутку.
В скрипте, при открытии модального окна, запретим прокрутку у тега "body" путем добавления класса "hidden".
При этом, не забывайте удалять его при закрытии модального окна. В целом все это выглядит так.
Если у вас разные кнопки вызывают разные модальные окна, то привязывайтесь не к классу окна, а к "id", который должен быть уникальным на странице. То есть если у модального окна , то и обращаться к нему можно так:
Если несколько кнопок вызывают одно и тоже окно, то можно перечислить их айди и классы так:
На этом способ реализации открытия модального окна при помощи jQuery можно считать оконченным. Если будут вопросы, то задавайте в комментариях - не стесняйтесь.
Каждый начинающий веб-разработчик рано или поздно сталкивается с задачей, реализовать на сайте модальное окно (аналог pop-up окна).
Модальное окно полностью блокирует работу родительского сайта, пока пользователь не закроет данное окно. Как вы понимаете, что для навязывания такого действия, содержимое модального окна, должно представлять пользу для пользователя.
Желательно отказаться от автоматически всплывающего модального окна, а предоставить пользователю только кнопку, открывающую окно и хорошо видимый элемент (обычно это крестик), закрывающий окно. Этот способ, мы сегодня и реализуем в данной статье.
Демонстрация модального окна.
Мы сделаем адаптивное модальное окно без плагинов и библиотек, на чистом CSS+JS.
HTML разметка
Создадим кнопку, при клике на которую, будет открываться модальное окно.
Оболочка окна с затемнением, внутри которого, будет окно поменьше с содержимым. Затемнение самого сайта, подсказывает пользователю, что сначала следует заняться окном.
Содержимое модального окна, состоящее из хедера, тела и футера.
Шапка модального окна
Напишите здесь что-нибудь важное
Добавьте что-нибудь менее важное.
Футер
CSS код
Оформление полноэкранного фона модального окна.
.modal display: none; /* Скрыто по умолчанию */
background-color: rgb(0,0,0); /* Затемнение фона */
background-color: rgba(0,0,0,0.5); /* Полупрозрачное затемнение */
z-index: 1; /* Фон на нижнем слое */
overflow: auto; /* При необходимости, то появиться прокрутка */
>
Модальное окно с содержанием, к которому примениться анимация.
.modal-content animation-name: animate;
animation-duration: 0.5s
>
Добавим анимации для плавного скольжения сверху вниз и постепенного появления модального окна.
Стилизуем крестик (сущность ×), при клике по которому, модальное окно закроется.
.close font-size: 30px;
font-weight: bold;
>
JS код
Без JavaScript, не будет открываться и закрываться модальное окно. Получаем все нужные элементы, участвующие в процессе.
Получить модальное окно по ID.
var modal = document.getElementById('myModal');
Получить кнопку, которая открывает модальное окно по ID.
var btn = document.getElementById("myBtn");
Получить тег span с классом close, который закрывает модальное окно.
var span = document.getElementsByClassName("close")[0];
Функции открыть / закрыть при клике.
Когда пользователь кликает по кнопке, модальное окно открывается – переходит из скрытного состояния в видимое.
btn.onclick = function() modal.style.display = "block";
>
Когда пользователь кликает на крестик в теге span, модальное окно закрывается, наоборот переходит из видимого состояния в скрытное.
span.onclick = function() modal.style.display = "none";
>
Когда пользователь кликает где-то за пределами модального окна, оно закрывается, становиться невидимым.
window.onclick = function(event) if (event.target == modal) modal.style.display = "none";
>
>
Свободное владение языком JavaScript, делает создание web-страниц – не скучным процессом, вы можете сами в этом убедиться, посмотрев мой видеокурс "JavaScript, jQuery и Ajax с Нуля до Гуру".
На CodePen вы можете увидеть весь код модального окна на CSS+JS, который можно скачать и использовать в своих проекта.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Читайте также: