Можно ли скрыть форму(модальное окно) на чистом css?

Question

[Underdoggit]

Есть модальное окно, добавил img\close с абсолютным позиционированием, можно ли кликнув по img добавить класс модальному окну: display:none\visibility:hidden? Или сюда только js\jquery?

Comments

[Rustam Bainazarov]

CSS не умеет управлять DOM и классами.

Только JS.

[DanKud]

Класс добавить нельзя, но можно повешать модальное окно на псевдокласс :checked и открывать/скрывать при необходимости. Проблем в том, что CSS не умеет двигаться вверх по уровням DOM и в итоге в коде может получится просто каша с позиционированием. Вот краткий пример как это можно сделать - https://codepen.io/anon/pen/wLdpjx

[Ankhena]

На чистом CSS добавить класс нельзя, но скрыть можно.
1. В самом начале body пишете инпут чекбокс.
2. Ваша кнопка "закрыть" это лейбл от этого инпута
3. Дальше нужно построить селектор от input:checked до модального окна через ~ или +
И прописать 2 состояния для блока модального окна при чекнутом инпуте и при нечекнутом.

Но это изврат.

Правильнее это делать на js.

Answer 1

[dollar]

Только JS.

Вообще модальные окна - зло. Это уже не совсем веб-сайт. Если у вас полноценное приложение, с кнопками и прочим, то оно как бы полностью на JS, без вариантов. А если у вас именно сайт (веб-морда какого-то сервиса), то лучше обойтись без модальных окон. Я практически уверен, что функцию вашего модального окна можно вполне реализовать на отдельной странице. За исключением агрессивной рекламы, конечно же (что только подтверждает, что модальные окна - зло).

Comments

[NewDevLab]

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

[dollar]

NewDevLab, покрыть что? Что такое "поведение десктопа в веб"? Гипертекст был задуман, как реализация набора документов и кросс сылок между ними. Именно к этому привыкли в вебе еще с прошлого века. А модальные окна использовались только в нативных приложениях.

Мода, конечно, не стоит на месте. Но конверсия всех рассудит в конце концов.

[NewDevLab]

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

[dollar]

NewDevLab, да, только браузер устроен по старой схеме:
1) набор вкладок, которые друг о друге не знают
2) каждая страница имеет адрес, чтобы копирнуть другу или разместить на (своей) странице.
3) работа с информацией - в основном, гипертекст.
От этого веб вряд ли куда-то уйдет, потому что нет смысла, всех всё устраивает.

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

А тот факт, что веб-технологии используются для создания нативных приложений (и вообще приложений) не имеет к чистому вебу практически никакого отношения. Пользователь приложения может даже не знать, что там "веб" внутри (html+js). Так что нельзя говорить, что "веб к этому идёт", и уж тем более, что это очевидно.

[NewDevLab]

не так. веб просто идёт на замену десктопа. без native.

[Сергей delphinpro]

dollar,
1) Несколько вкладок одного браузера вполне могут знать друг о друге, и обмениваться информацией.
2) Модальное окно, и даже состояния внутри него вполне могут иметь свои адреса. Все зависит от желания и криворукости программиста.
3) Современный браузер — это уже далеко не только работа с текстовой информацией.

Какое-то странное у вас заявление. С чего вдруг такое отрицание современных web-технологий? =)

Тот же javascript сегодня является неотъемлемой частью веба. И от этого никуда не деться.

[dollar]

Сергей delphinpro, я не отрицаю веб-технологии. Мы говорили о том, что "веб движется на замену десктопу". Разговор в контексте этого заявления. И я в курсе, что вкладки одного домена могут общаться, что есть хитрые способы адресов и т.д.

Кстати, тот же javascript лично я старательно вырезаю отовсюду, где это возможно (точнее, умные фильтры сами это делают). Если не возможно, отказываюсь от такой подачи информации в пользу других источников. А если отказаться нельзя, то в тех малых случаях javascript работает, и только в них, но это не делает js "частью веба", тем более "неотъемлемой".

P.S. Если хотите предметно подискутировать, то нужно начать с определения терминов, да и вообще с выбора темы. Тему с товарищем NewDevLab я выделил жирным, если что. А вы просто разбираете мои утверждения в отрыве от темы.