Можно ли через pointer-events: none; прятать модальные окна?

Question

[wakenbyWork]

Пишу для модальных окон обычно такой код:

.modal {
  transition: $transition-duration opacity $transition-timing-function;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  opacity: 0; // Визуально скрываем
  pointer-events: none; // Предотвращает события мыши и щелчки по элементу.

  &--open {
    opacity: 1; // Показываем
    pointer-events: unset; // Разрешаем работать с окном
  }
}

Так удобно анимировать открытие и закрытие модального окна. Но видел что делают через visibility. Но анимацию закрытия с помощью visibility делать не так легко как с pointer-events.

Не подскажите есть ли преимущества в visibility в данном вопросе перед pointer-events?

Answer 1

[Сергей delphinpro]

pointer-events: none;

Это предотвратит любые взаимодействия с вашим окном. Но ведь это не то, чего вы хотите?

Comments

[wakenbyWork]

Именно то что я хочу. Это предотвращает взаимодействие с модальным окном. А прозрачность убирает ее из видимости. Мне это нравится на много больше чем visibility))

[gogowq]

wakenbyWork,
не совсем понимаю, как pointer-events относится к тому,что у вас уже у модалки уже стоит opacity: 0; и с ней и так нельзя взаимодействовать,пока не измениться opacity.И "прятать модальные окна?" pointer-events не может
pointer-events применяют к видимому элементу,чтоб с ним не взаимодействовать.Например ,если не нужна ссылка в каком то элементе,но никак не в вашем случае.

[wakenbyWork]

gogowq, Причем тут opacity: 0;. И с чего вы взяли что при opacity: 0; с окном нельзя взаимодействовать? Оно будет кликабельным. Что за бред вы сказали?

pointer-events применяют к видимому элементу,чтоб с ним не взаимодействовать.

Есть какое то правило чтобы оно применялось только к видимому элементу? Впервые слышу.

Раз уж вам мало сокращенного кода, я вам приведу его весь. Разжую так сказать.

.modal {
  transition: $transition-duration opacity $transition-timing-function;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  opacity: 0; // Скрываем
  pointer-events: none; // Предотвращает события мыши и щелчки по элементу.

  &--open {
    opacity: 1; // Показываем
    pointer-events: unset; // Разрешаем работать с окном
  }
}

Так-же цитата:

Свойство pointer-events позволяет управлять тем, как элементы будут реагировать на события мыши или прикосновения к сенсорному экрану. Часто применяется для того, чтобы в сложной компоновке можно было взаимодействовать с нижележащими элементами, игнорируя вышележащие.

Все идеально подходит друг к другу. И анимируется лучше чем visibility.

Ваш пример:

Например ,если не нужна ссылка в каком то элементе

. В каком смысле не нужна ссылка? Так удалите ее, или выставите display: none; Или переделайте без ссылки.

но никак не в вашем случае

- Скорее уже никак в вашем случае.

Ваш комментарий не много бесполезный. Вы не вникли в вопрос, и даже не прочитали его. И вряд ли знаете как работает opacity: 0 и pointer-events: none

[Сергей delphinpro]

wakenbyWork, В целях оптимизации лучше всё же полностью скрывать блок.
CSS анимации при этом можно сохранить. Правда javascript логики будет побольше.
Нужно будет прослушивать событие animationend/transitionend и после окончания анимации прятать окно (display: none). Показывать наоборот, сначала display: block, потом анимация появления.

[wakenbyWork]

Сергей delphinpro, Вот мне про оптимизацию и было на самом деле интересно услышать)) Просто модальных окон может быть много. И я не знал какой способ более оптимизирован. visibility или pointer-events.

Вы определенно правы, через display будет явно больше оптимизации. Спасибо!)

[gogowq]

wakenbyWork
"- Скорее уже никак в вашем случае" , боже, чел какой ты токсичный. Пишешь так, будто бы пытаешься меня чем то задеть)). При нормальной компоновке проекта, все элементы модальных окон вызываются из задницы мира и по ним в априори нельзя кликнуть,по этому твой pointer-events там абсолютно не нужен. Или ты ставишь свой div с модальным окном,сразу под кнопкой которой оно и вызывается?
А про удалить ссылку и прочее,что ты там писал-cмешно конечно))Ну если это 1страничный хтмл,то возможно так конечно нужно и делать.В целом,удачи).

[wakenbyWork]

gogowq,

боже, чел какой ты токсичный. Пишешь так, будто бы пытаешься меня чем то задеть))

Тут да, я что то ушел в агрессию. Прошу прощения, был не прав.

При нормальной компоновке проекта, все элементы модальных окон вызываются из задницы мира.

Это правда. Все модальные окна находятся перед закрывающемся тегом body. Но по ним кликнуть можно совершенной спокойно.

Модальное окно имеет же

position: fixed;left:0;top:0;width:100%;height:100%

чем уже перекрывает всю страницу, и все клики будут уже проходить по модальному окну.

Чтобы убрать данный эффект и ставиться pointer-events

А про удалить ссылку и прочее, что ты там писал-cмешно конечно))

Ну пример был описан так))

[gogowq]

wakenbyWork, Ну тут просто зависит от реализации. У каждого она своя. Я к примеру условные стили
position: fixed; вешаю на класс, который добавяется при вызове окна и в моём случае, кликнуть по любому из модальных окон, невозможно, хоть их там 100+.
По этому,тут соглашусь,что в вашем случае,это вполне уместно, если в open у вас только opacity меняется