Как настроить media queries для всплывающего окна (javascript)?

Question

[Giorgos]

Здравствуйте!

У меня сайт на Вордпресс и я недавно установил плагин для создания всплывающих окон. Однако меня не устраивает дизайн попапов на маленьких устройствах. Поэтому я решил создать отдельный попап для ПК, и другой — для моб. устройств и планшетов.

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

Со стилями я разобрался, добавив индивидуальные id попапов в style.css с правилом media и задал им display: none !important;

Но javascript всё равно загружается и в итоге я скроллю страницу и всё замирает, пока не кликнешь / не тапнешь по экрану.

Подскажите, пожалуйста, как настроить media queries с нужным правилом для javascript, чтобы попап не запускался? И куда именно надо добавить код?

CSS выглядит так:

media (max-width: 991px) {
#id-попапа {
display: none !important;
}
}

media (min-width: 992px) {
#id-попапа {
display: none !important;
}
}

Заранее спасибо за помощь!

Comments

[Ankhena]

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

Так и меняете "дизайн" через media, а не разные попапы делайте.

[Giorgos]

Ankhena, дело не только в этом. У меня для моб. устройств и планшетов не только дизайн отличается, но и само предложение в попапе. Грубо говоря, на маленьких экранах предложение вступить в чат ВК, а на больших экранах — предложение вступить в группу ВК.

[Ankhena]

Giorgos,

Грубо говоря, на маленьких экранах предложение вступить в чат ВК, а на больших экранах — предложение вступить в группу ВК.

Не очень ясная дискриминация.