How to Make the Entire Popup Clickable

Goal: Make it so clicking anywhere in the popup will take visitors to a specific link or website.

This is easy to achieve by expanding the clickable area of a link or button to cover the whole popup.

If you’re using the built-in shortcode button, for example:

[mypopup_button tag="a" href="https://wpshop.ru/"]Go to Site[/mypopup_button]

Add the following CSS to make the entire popup area clickable:

/* Make the button cover the entire popup so it's all clickable */
#{{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;
}

If you’re using a different button or just a text link, simply give it a custom class and use the same CSS rules with your class instead of .mypopup-button.

For example, if your popup content is just a single link:

<a href="https://wpshop.ru/" class="mypopup-custom-link">Click anywhere in this popup</a>

You’d use CSS like this:

/* Make the entire popup area clickable */
#{{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;
}

/* Optionally remove underline from the link */
#{{id}} .mypopup-custom-link {
  text-decoration: none;
}

The last line removes the underline from your link. If you want to keep the underline, you can simply remove that line.