Как сделать весь попап кликабельным?

Задача: чтобы можно было кликнуть в любое место попап и перейти по ссылке на сайт.

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

Если мы используем кнопку-шорткод, например [mypopup_button tag="a" href="https://wpshop.ru/"]Перейти[/mypopup_button], тогда код будет выглядеть так:

/* Растягиваем область кнопки на весь попап, чтобы можно было кликнуть */
#{{id}} .mypopup-button:hover {-webkit-transform: none; transform: none; }
#{{id}} .mypopup-button:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; }
#{{id}} .mypopup-modal-close { z-index: 200; }

Если у нас другая кнопка или просто ссылка в тексте, мы можем задать ей любой класс и прописать такие же стили, только заменить .mypopup-button на ваше название класса.

Например, вы создаете попап, где в контенте указываете только одну ссылку, без кнопок:

<a href="https://wpshop.ru/" class="mypopup-custom-link">Текст попап окна, по которому можно кликнуть</a>

Для этой ссылки мы добавили класс mypopup-custom-link. Теперь стили для этой ссылки будут выглядеть так:

/* Растягиваем область кнопки на весь попап, чтобы можно было кликнуть */
#{{id}} .mypopup-custom-link:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; }
#{{id}} .mypopup-modal-close { z-index: 200; }

/* Убираем подчеркивание у ссылки */
#{{id}} .mypopup-custom-link { text-decoration: none; }

Дополнительно в последней строчке мы убрали подчеркивание у ссылки. Если это не требуется — строчку можно удалить.

Вам помог ответ?
Похожие вопросы
Нужно ли покупать Clearfy, если у меня Ваша тема?
+25
Какой хостинг подходит для хороших результатов в PageSpeed?
+14
Как добавить Google Captcha для встроенной контактной формы?
+0
Как выполнить действие после выбора ответа в опросе
+0
Как изменить заголовок "Новые данные формы MyPopup:" в сообщении встроенной формы обратной связи?
+0
Как изменить почту, на которую приходят сообщения с формы обратной связи?
+0
Как изменить фоновый цвет контента?
+9
Как в карточках постов "Стандартная" вывести кнопку "Читать далее"?
+9
В чем разница нашего Clearfy Pro от Webcraftic (Creative Motion) Clearfy
+9
В robots.txt дублируется карта сайта (Sitemap)
+9
Не работает Last-Modified
+8
Как вывести виджет анонсов записей с миниатюрами?
+8
Как на мобильном "Меню в шапке" вывести под "Меню под шапкой"?
+8
Как добавить или изменить шрифт в теме
+7
Как изменить цвет заголовка записи\страницы?
+7
Как изменить размер миниатюры?
+7
Не работает встроенный лайтбокс
+7
Что делать, если украли сайт или контент?
+61
Можно ли взять лицензию на один домен, а потом докупить неограниченную?
+6
Почему не импортируется/дублируется демо-контент?
+6