Как сделать модальное окно как в вк

Обновлено: 18.05.2024

Всплывающие окна Ajax

Разнообразный дизайн на сплывающие окна Ajax, которые предоставлены для разных функций, где можно выбрать под любой дизайн и функциональность для сайта. Основном ставят для дизайна, так как оригинальный, который идет системой uCoz простой одноцветный. Здесь вы можете подобрать дизайнерский и также очень простые, но очень красиво созданы.

Когда создаем сайта в последний очередь мы задумываемся о Ajax как оно должно выглядеть на сайте. Но всегда устанавливаем тот, который бы по своим стилям слился бы самим шаблоном. Есть просто светлые также эффективные и созданы под заказ. Главное, что они все рабочие и разные по своему.

Модальное окно как вконтакте

Все видели ВКОНТАКТЕ подобные модальные окна. Причем они там везде, при клике на картинки, видео и т.п. нам всегда открывают модальные окна. Сделать их можно довольно просто, в этой статье предлагаю одну из реализаций подобных модальных окон с помощью jQuery.

Для начала рассмотрим, то как модальные окна ведут себя ВКОНТАКТЕ и какими возможностями они обладают, исходя из этого попробуем сделать нечто подобное.

Самым важным и интересным свойством модальных окон ВКОНТАКТЕ является, то что при их открытии меняется полоса прокрутки браузера и в этом случае мы можем прокручивать только содержимое модального окна, а при его закрытии мы возвращаемся к той части основной страницы на которой остановились.
Модальные окна ВКОНТАКТЕ закрываются либо по нажатию ссылки "закрыть", либо по клику на крестике, либо по клику на сером фоне.
Внизу модального окна присутствует кругленькая кнопочка, которая позволяет изменить фон, перекрывающий основную часть страницы за модальным окном.
Также эти модальные окна обладают возможностью растягивания при изменении размеров браузера, однако, эта часть в данном примере не будет реализована.

Поставленные задачи будут сводиться к реализации первых 3х пунктов, однако расположение элемента, меняющего фон мы поменяем и расположим его слева вверху.

Итак сразу продемонстрирую, что у нас получится в итоге.

Начнем с того, что определим структуру документа и обозначим контейнеры с контентом.

Далее определим CSS свойства наших элементов, весь CSS не буду приводить здесь, его можно посмотреть в демо версии, приведу только то, на что следует обратить внимание.

Далее пойдут JQuery функции, которые будут отвечать за взаимодействие элементов на странице.

Модальное окно готово, ничего сложного, как видите, нет. Все до безобразия легко и просто, а главное удобно применять такие окна на своих сайтах и проектах.

Модальное окно с просмотром картинок как в вконтакте

На текущий момент я знаю, что в интернете есть большое количество jQuery плагинов для создания красивой галереи, но ни один из них (просмотренных мною) не реализует все мои требования, а именно:

модальное окно имеет свой адрес, то есть при открытии картинки в модальном окне меняется адресная строка. И наоборот, при вводе в адресную строку ссылки на картинку происходит не просто переход на сайт, но и открытие модального окна с соответствуеющей картинкой.
модальное окно должно содержать не только картинку, но и блоки с информацией (просмотры, дата загрузки и т.д.), теги, комментарии, лайки и любую другую информацию их базы данных, которая (информация) мне понадобится.

Но чего я на текущий момент я не знаю, так это способа реаллизации этих требований даже в самых общих чертах. Устанавливал парочку относительно подходящих плагинов, но на этом всё и закончилось. Куда, как и в какую сторону нужно посмотреть, что бы приблизиться к реализации моих требований?

Делаем модальные окна для сайта. Заботимся об удобстве и доступности

Вёрстка таких окон сначала кажется простой задачей. Модальные окна можно сделать даже без помощи JS только лишь с помощью CSS, но на практике они оказываются неудобными, и из-за маленьких недочетов модальные окна раздражают посетителей сайта.

В итоге было задумано сделать собственное простое решение.

Вообще говоря, есть несколько готовых скриптов, JavaScript библиотек, реализующих функционал модальных окон, например:

Arctic Modal,
jquery-modal,
iziModal,
Micromodal.js,
tingle.js,
Bootstrap Modal (из библиотеки Bootstrap) и др.

(в статье не рассматриваем решения на базе Frontend-фреймворков)

Несколькими из них я пользовался сам, но почти у всех находил какие-то недостатки. Некоторые из них требуют подключения библиотеки jQuery, которая есть не на всех проектах. Для разработки своего решения, нужно сначала определиться с требованиями.

Что мы ждём от модальных окон? Отвечая на этот вопрос, я основывался на докладе «Знакомьтесь, модальное окно» Анны Селезнёвой, а так-же на относительно старой статье NikoX «arcticModal — jQuery-плагин для модальных окон».

Итак, чтобы нам хотелось видеть?

Дисклеймер: Прежде чем мы рассмотрим подробности, сразу дам ссылку на готовый код получившейся библиотеки (HystModal) на GitHub, а также ссылку на демо+документацию.

Начнём с разметки.

1. Разметка HTML и CSS

1.1. Каркас модальных окон

Как открыть окно быстро? Самое простое решение: разместить всю разметку модального окна сразу в HTML странице. Затем скрывать/показывать это окно при помощи переключения классов CSS.

Набросаем такую разметку HTML (я назвал этот скрипт «hystmodal»):

Сделаем так, чтобы .hystmodal растягивался на всё окно браузера и закрывал собой содержимое страницы. Чтобы этого добиться, установим фиксированное позиционирование в CSS и приравняем свойства top, bottom, left и right к нулю.

В этом коде сделаны ещё две вещи:

Так как мы хотим центрировать окно внутри страницы, превращаем .hystmodal в flex-контейнер с выравниваем его потомков по центру по вертикали и горизонтали.
Окно может быть больше высоты экрана браузера, поэтому мы устанавливаем overflow-y: auto , чтобы при переполнении возникала полоса прокрутки. Также, для сенсорных экранов (в основном для Safari) нам стоит установить свойство -webkit-overflow-scrolling: touch , чтобы сенсорная прокрутка работала именно на этом блоке а не на странице.

Теперь установим стили для самого окна.

Кажется возникли сложности.

Проблема №1. Если высота окна больше высоты окна браузера, то контент окна будет обрезан сверху.

Это возникает из-за свойства justify-content: center . Оно позволяет нам удобно выровнять потомков по основной оси (по вертикали), но если потомок становится больше родителя то часть его становится недоступной даже при прокручиваемом контейнере. Подробнее можно посмотреть на stackoverflow. Решение – установить justify-content: flex-start , а потомку установить margin:auto . Это выровняет его по центру.

Проблема №2. В ie-11 если высота окна больше высоты окна браузера, то фон окна обрезается.

Решение: мы можем установить flex-shrink:0 потомку – тогда обрезки не происходит.

Проблема №3. В браузерах кроме Chrome нет отступа от нижней границы окна (т.е. padding-bottom не сработал).

Сложно сказать баг это браузеров или наоборот соответствует спецификации, но решения два:

установить псевдоэлемент ::after после потомка и дать ему высоту вместо padding
обернуть элемент в дополнительный блок и дать отступы уже ему.

Воспользуемся вторым методом. Добавим обертку .hystmodal__wrap . Так мы заодно обойдём и проблему №1, а вместо padding у родителя установим margin-top и margin-top у самого .hystmodal__window .

Наш итоговый html:

В код также добавлены некоторые aria и role атрибуты для обеспечения доступности.

Обновленный код CSS для обертки и окна.

1.2 Скрываем окно

Сейчас наше окно всегда видно. Когда говорят о скрытии элементов, первое что приходит на ум это переключать свойство display со значения none до нашего значения flex.

Но этот подход нас не устроит, ведь свойство display не анимируется. Все переходы дочерних элементов, указанные в свойстве transition, работать не будут.

Нам поможет другое свойство visibility:hidden . Оно скроет окно визуально, хотя и зарезервирует под него место. А так как все будущие окна на странице имеют фиксированное
позиционирование – они будут полностью скрыты и не повлияют на остальную страницу. Кроме того, на элементы с visibility:hidden нельзя установить фокус с клавиатуры, а от скрин-ридеров мы уже скрыли окна с помощью атрибута aria-hidden="true" .

Добавим также классы для открытого окна:

1.3 Оформление подложки

В лучшем случае, нам нужен отдельный html-элемент в качестве оверлея. Можно использовать и имеющийся элемент модального окна .hystmodal в качестве оверлея, но тогда анимация на этом элементе (например переход opacity) будет затрагивать и внутренние элементы. В итоге, не получится анимировать разные свойства для окна и оверлея отдельно.

Просто разместим элемент .hystmodal__shadow прямо перед закрывающим </body> . В будущем, сделаем так, чтобы этот элемент создавался автоматически из js при инициализации библиотеки.

1.4 Отключение прокрутки страницы

Когда модальное окна открывается, мы хотим, чтобы страница под ним не прокручивалась.
Самый простой способ этого добиться — повесить overflow:hidden для body или html, когда окно открывается. Однако с этим есть проблема:

Проблема №4. В браузере Safari на iOS страница будет прокручиваться, даже если на тег html или body повешен overflow:hidden .
Решается двумя способами, либо блокированием событий прокрутки (touchmove, touchend или touchsart) из js вида:

Однако при этом блокируется и прокрутка самого модального окна, а также все прокручиваемые блоки внутри окна, если они будут. Требуется дополнительные проверки селекторов из js, что приводит к усложнению кода, поэтому рассмотрим другой вариант.

ps: можно конечно применить библиотеку scroll-lock, в которую заложено это решение, но в статье было решено воспользоваться другим вариантом.

Другое решение – основано частично на CSS. Пусть когда окно открывается, на элемент <html> будет добавляться класс .hystmodal__opened :

Благодаря position:fixed , окно не будет прокручиваться даже в safari, однако здесь тоже не всё гладко:

Проблема №5. При открытии/закрытии окна страница прокручивается в начало.
Действительно, это происходит из-за изменения свойства position, текущая прокрутка окна сбрасывается.

Для решения, нам нужно написать следующий JS (упрощенно):

При открытии:

При закрытии:

Отлично, приступим к JavaScript коду.

2. Код JavaScript

2.2 Каркас библиотеки

Нам нужна совместимость со старыми браузерами включая IE11 поэтому нам нужно выбрать из 2 вариантов кодинга:

Разрабатывать на старом стандарте ES5, и использовать только те фичи, которые поддерживают все браузеры.
Применить современный синтаксис ES6, но подключить транспайлер Babel, который автоматически преобразует код для всех браузеров и встроит необходимые полифилы.
Было принято решение использовать второй вариант, с прицелом на будущее.
Приступим.

Основа нашей библиотеки единственный класс HystModal . Ниже я приведу скелет кода с комментариями, а потом добавим остальной функционал.

Итак, мы описали класс HystModal . Чтобы всё работало, нужно всего лишь подключить наш скрипт и создать экземпляр класса:

Проблема №6: если в браузере есть фиксированный скроллбар (который влияет на ширину страницы), то при открытии/закрытии окна происходит сдвиг контента, когда полоса прокрутки то появляется то пропадает.

Действительно – скроллбар пропадает и контент страницы перераспределяется. Чтобы решить эту проблему, можно добавить отступ справа к тегу html, равный ширине скроллбара когда он пропадает.

Однако ширина скроллбара может быть разной в разных браузерах и операционных системах. Кроме того, скроллбара может не быть на коротких страницах или он может быть плавающим (например, в Chrome на Android). Поэтому ширину нужно вычислять динамически из скрипта.

Дополним метод _bodyScrollControl()

Почему код метода close() упрощён? Дело в том, что просто убирая классы CSS у элементов, мы не можем анимировать закрытие окна.

Проблема №7. При закрытии окна, свойство visibility:hidden применяется сразу и не даёт возможности анимировать закрытие окна.

Причина этого известна: свойство visibility:hidden не анимируется. Конечно, можно обойтись без анимации, но, если она нужна, сделаем следующее.

Создадим дополнительный CSS-класс .hystmodal—moved почти такой-же как и .hystmodal--active

Затем при закрытии сначала добавим этот класс к окну и повесим обработчик события «transitionend» на модальном окне. Затем удалим класс `.hystmodal—active , таким образом вызывая css-переход. Как только переход завершится, сработает обработчик события «transitionend», в котором сделаем всё остальное и удалим сам обработчик события.

Ниже: новая версия методов закрытия окна:

Вы заметили, что мы создали ещё один метод _closeAfterTransition() и перенесли основную логику закрытия туда. Это нужно, чтобы удалить обработчик события transitionend после закрытия окна, ведь в метод removeEventListener необходимо передать именно ту функцию, которую мы привязывали.

Кроме того, если анимация не будет нужна, можно просто вызвать this._closeAfterTransition() не вешая его на событие.

Как мы помним, внутри addEventListener, this будет указывать на селектор где происходит событие, а не на наш экземпляр класса, поэтому в конструкторе нужно добавить ещё одну строчку для жёсткой привязки метода к this.

2.2 Закрытие окна по клику на оверлей

Нам нужно обработать ещё одно событие – закрытие окна по клику на элемент подложки .hystmodal__wrap . Мы можем повесить обработчик клика на документ для делегирования события как при открытии и проверить что событие произошло на .hystmodal__wrap примерно так:

Это будет работать, но есть один малозаметный недостаток.

Проблема №8. Если кнопку мыши нажать внутри окна, а отпустить за его пределами (над подложкой), окно закрывается.

Представьте, что в окне форма. Вы выделяете текст в поле ввода и случайно двигаете мышь чуть дальше, курсор заходит на подложку и вдруг окно закрывается, всё вдруг пропадает из виду. Не хотелось бы, чтобы так было.

Окно закрывается потому что по спецификации, если нажатие и отпускание мыши были на разных элементах, то событие click сработает на самом ближайшем общем для них элементе, а у нас это как раз .hystmodal__wrap .

Мы могли бы решить это изменением html, добавляя ещё один div сразу после .hystmodal__window и размещая его визуально под окном. Но нам бы не хотелось добавлять лишний пустой div ещё сильнее усложняя разметку.

Мы можем разбить наш addEventListener на два отдельных обработчика: для событий mousedown и mouseup и будем проверять чтобы оба события происходили именно на .hystmodal__wrap . Добавим новые обработчики событий в наш метод eventsFeeler()

2.3 Управление фокусом

У нас заготовлено два метода для управления фокусом: focusContol() для переноса фокуса внутрь окна и обратно при его закрытии, а также focusCatcher(event) для блокирования ухода фокуса из окна.

Решения для фокуса были реализованы аналогично js-библиотеке «Micromodal» (Indrashish Ghosh). А именно:

1. В служебный массив сохраним все css селекторы на которых может быть установлен фокус (свойство помещаем в init()):

2. В методе focusContol() находим первый такой селектор в окне и устанавливаем на него фокус, если окно открывается. Если же окно закрывается – то переводим фокус на this.starter :

3. В методе focusCatcher() находим в окне и превращаем в массив коллекцию всех элементов на которых может быть фокус. И проверяем, если фокус должен был выйти на пределы окна, то вместо этого устанавливаем фокус снова на первый или последний элемент (ведь фокус можно переключать как по Tab так и по Shift+Tab в обратную сторону).

Результирующий код метода focusCatcher:

По сути мы реализовали все необходимое для успешного создания модальных окон, осталось ещё несколько дел:

Проблема №9. В IE11 не работают методы Element.closest() и Object.assign() .

Для поддержки Element.closest, воспользуемся полифилами для closest и matches от MDN.

Можно их вставить просто так, но так как у нас проект всё равно собирается webpack, то удобно воспользоваться пакетом element-closest-polyfill который просто вставляет этот код.

Для поддержки Object.assign , можно воспользоваться уже babel-плагином @babel/plugin-transform-object-assign

3. Заключение и ссылки

Повторяя начало статьи, всё изложенное выше, я оформил в маленькую библиотеку hystModal под MIT-лицензией. Вышло 3 кБ кода при загрузке с gzip. Ещё написал для неё подробную документацию на русском и английском языке.

Что вошло ещё в библиотеку hystModal, чего не было в статье:

Настройки (вкл/выкл управление фокусом, варианты закрытия, ожидание анимации закрытия)
Коллбеки (функции вызывающиеся перед открытием окна и после его закрытия (в них передаётся объект модального окна))
Добавлен запрет на какие-либо действия пока анимация закрытия окна не завершится, а также ожидание анимации закрытия текущего окна перед открытием нового (если окно открывается из другого окна).
Оформление кнопки-крестика закрытия в CSS
Минификация CSS и JS плагинами Webpack.

Если вам будет интересна эта библиотека, буду рад звёздочке в GitHub, или напишите в Issues о найденных багах. (Особенно большие проблемы, наверное, в грамматике английской версии документации, так как мои знания языка пока на начальном уровне. Связаться со мной также можно в Instagram

При переходе по ссылке загружается модальное окно, как сделать аналог ВК?

Суть вопроса в том что бы при переходе по ссылке открывалась информация в модальном окне, те обычное состояние страницы - page.php > клик > загрузка окна (получается допустим page.php/1 ) > копирование url страницы (page.php/1 ) > вставить в новой вкладке адрес > открытие с загрузкой модального окна, как сделать?

просто получается у меня если скопировать так адрес, он не открывается в модальном окне , а просто в новой вкладке, как страница =(

Адаптивное модальное окно

Всем привет, сегодня мы с вами напишем адаптивное модальное окно для сайта.

Наше модальное окно открывается при нажатии на кнопку «Оставить заявку», закрывается при:

— нажатии на кнопку «Закрыть» (крестик)

— клике мышкой вне модального окна

— нажатии кнопки ESC на клавиатуре.

Зачем так сложно? Дело в том, что в большинстве случаев мы создаем не просто сайт — мы создаем средство рекламы продукта или услуги нашего заказчика. И чтобы сайт работал, как ему полагается, т.е. способствовал продажам и получению прибыли, посетители сайта должны чувствовать себя максимально комфортно во время использования сайта.

И если, например, человек привык закрывать модальные окна при щелчке вне модального окна, а не при нажатии на кнопку «Закрыть», то у него может возникнуть дискомфорт, если он не сможет воспользоваться привычным способом взаимодействия. Возможна даже ситуация, когда в таком случае посетитель просто уйдет с нашего сайта, так и не приобретя услуги и товары :(

И ваш заказчик потеряет деньги.

Я не пугаю вас, просто хочу сказать, что надо всегда продумывать все возможные пути поведения человека на вашем сайте и, конечно же, смотреть и анализировать примеры удачных решений. И будет вам счастье :)

Для начала давайте подключим иконочный шрифт FontAwesome. Сделать это можно так: добавим в верстку между тегами <head></head> следующий код:

У меня в CodePen шрифт подключен немного по-другому, как этого требует данная песочница :) но работает абсолютно так же.

Напишем верстку для нашего модального окна:

Первая строка — это кнопка, при нажатии на которую будет открываться модальное окно.

Далее идет верстка самого модального окна. 6 строка — это кнопка для закрытия модального окна, как раз использован шрифт Font Awesome.

Кстати, в дальнейшем я обязательно сделаю урок по этому шрифту, он достоин отдельного упоминания в моем блоге. Мне нравится с ним работать, очень удобно :) его можно использовать не только так и подключать другим способом.

В общем, если говорить о структуре нашей модалки — на заднем фоне идет полупрозрачный темный слой, на весь размер экрана, а над ним — само модальное окно. Это распространенная практика, так сказать, универсальный способ в верстке. Поэтому смело им можете пользоваться.

К своему стыду, я так стала делать не сразу. Раньше у меня были какие-то дикие модальные окна с затемнением, сделанным с помощью outline (. ) с огромной толщиной! Ну ничего страшного, не ошибается тот, кто ничего не делает ^_^ и вы не бойтесь ошибаться, со временем всему научитесь!

Ок, на чем мы остановились? Правильно, верстка готова. Теперь давайте стили писать.

Сначала для кнопки, она будет у нас менять цвет при наведении.

Далее задаем стили для блока mymodal и полупрозрачного заднего фона.

Стили для модального окна. position: relative для того, чтобы на модальном окне правильно разместить кнопку «Закрыть»

Стили для кнопки «Закрыть». Она тоже с эффектом при наведении, крутится :)

Для того, чтобы сделать наше модальное окно адаптивным, мы опять между тегами <head> и </head> должны вставить следующую строчку

<meta name="viewport" content="width=device-width, initial-scale=1">

Иначе все наши ухищрения с адаптивностью работать не будут.

Стили для адаптивности:

Стили готовы. Теперь осталась самая интересная часть. Создание кода на JS!

Ох, да. Подключим-ка сначала jQuery. Перед закрывающим тегом </body> вставляем код:

Мы будем работать с модальным окном не один раз, поэтому можем сразу сохранить его в переменную

Затем давайте напишем функцию, которая будет закрывать и открывать модальное окно. Если нам нужно повторять похожие действия не один раз в коде, то лучше их вынести в отдельную функцию.

Что делает эта функция? Когда мы в дальнейшем будем использовать эту функцию в коде, то в скобочках будем писать то значение свойства display, которое нужно установить для модального окна. Например, setModal('block');

Как сделать модальное окно как в вк

Всем привет.
Ребятки, подскажите, кто знает как сделать модальные окна по типа как в вконтакте. Ну или это не модальные окна, к сожаленияю даже названия не знаю, так, что погуглить не могу.

когда в ВК нажимаешь на какую нибудь картинку, она открывается как бы во всплывающем окне по верх всего сайта + в адресную строку добавляется адрес непосредственно на эту картинку + убераеться вертикальная прокрутка сайта и (при нужде) появляется вертикальная прокрутка именно этого окна.

В общем подскажите как это реализовать, или хотя бы как эта техника называется, что бы мог погуглить.

Ну и для примера скрин, если кто не понял что нужно.

ПОСЛЕ КЛИКА

Я просто хочу применить эту технологию для показа в таком окне страницу материала и комментариев к нему через фрейм или get.

Прикрепления: 5066965.jpg (456.6 Kb) · 9008746.jpg (363.5 Kb)

Уровень замечаний: Поддерживаю вопрос.

Сейчас же VK использует контейнеры и node.js, т.ч. там сам черт ногу сломит(

Я не так много работаю с jquery, но сам решил бы эту задачу таким образом:
Изменять url при открытии окна с помощью history.replaceState, далее проверять переход по url (например /?win=4) с помощью location.search.
Примерный код такой:
- При переходе по адресу mysite.ru/?win=4 откроется uwnd окно, где написано "Получено".
А так, я Вам просто идею подкинул, далее доработайте скрипт сами, но Ваша задача вполне решаема, в системе ucoz.

Вообще, идея использовать history, pushState и т.п. вполне разумна.
Есть только один нюанс - пользователи со старыми браузерами.
В скрипте нужно делать проверку, и для таких пользователей выводить обычные ajax-окна.
В общем у них будут некоторые трудности с использованием таких вещей.

Обычно делается как: для современных браузеров обработчик click производит замену адреса и загрузку данных, а для пользователей со старыми браузерами, либо отключенными скриптами происходит простой переход по ссылке.
Если планируется использовать свои страницы (откуда будет подгружаться информация в ajax-окна), то всё ещё не так плохо.
А стандартные окошки подгружают информацию со страниц вида /index/9-162866 поэтому просто так перенаправлять туда пользователя нежелательно.

Думаю реализовать это так, чтобы всё у всех работало одинаково хорошо можно, но довольно сложно.

Absit invidia verbo

Вот что показывает ВК если отключить JS и обновить страницу

Модальное окно под контакты или соц-сети

Но все оказывается просто и не сильно сложно, это когда при открытии блога или сайта, нам нужна популярная функция, а вы ее разместили в модальном каркасе, где на кнопке написали ключевое слово под действие. Делаем клик, и автоматически с правой стороны выезжает окно с данными. Саму суть вы поняли, как установить, то все ниже подробно описано, но, а где вы можете задействовать, здесь реально очень много вариантов.

Ниже предоставлена ссылка на demo страницу, где можете все оценить в рабочем режиме. Если по оттенку не подходит, то в закрепленной стилистике CSS можно выставить данную гамму цвета или создать красивый градиент.

Также нужно подчеркнуть, что шрифтовые иконки нужно прописать, те которые здесь под материал выставлены. То некоторые ссылки устанавливаю, но не все кнопки выводит, ведь используются шрифт FontAwesom 4.7 - там и меняем тематические значки, что также имеют эффект при наведении курсора.

Самое простое модальное окно на HTML и CSS

Которое будет идти на функцию отключение или просто, чтоб каркас исчез, где даже на этом небольшом элементе есть эффект по смене палитры цвета. Теперь веб мастер можно поставить его на сайт и разместить в нем описание или операторы, что могут выводить разные категорий, как статистика или информер.

Но дело в том, если у вас темный стиль ресурса, то в стилистике можно быстро изменить гамму, а точнее подогнать под оригинальный дизайн. Здесь представлен один из стандартных методов как нужно сделать чистые CSS на модальное окно, что будет запускаться при нажатии на кнопку под ссылкой с привязкой HTML. Сама кнопка идет больше для видимости, где в стилях убрав один класс и останется название, что можно поставить как в навигацию или в панель управление, где находится основной функционал или навигация сайта.

Это при проверке, что все отлично работает:

Приступаем к установке:

.anelumen <
display: flex;
position: fixed;
left: 0;
top: -100%;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
opacity: 0;
-webkit-transition: top 0s .7s, opacity .7s 0s;
transition: top 0s .7s, opacity .7s 0s;
>

.anelumen:target <
top: 0;
opacity: 1;
-webkit-transition: none;
transition: none;
>

.anelumen figure <
width: 100%;
max-width: 530px;
position: relative;
padding: 1.8em;
opacity: 0;
background-color: white;
-webkit-transition: opacity .7s;
transition: opacity .7s;
>

.anelumen:target figure <
opacity: 1;
>

.anelumen:target .nedismiseg <
visibility: visible;
>

Также нужно знать, что стилистика CSS и псевдокласс, это одна из тех которых не полностью используются по функций CSS с множеством интересных потенциальных приложений.

Он запускается когда URL адрес страницы соответствует идентификатору своему элементу или можно высказать по другому, это когда пользователь перескакивает на определенный элемент на странице.

Читайте также: