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

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

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

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