Why aren't my CSS styles being applied when using the :target pseudo class on Pro?

[GraceOC]

I have a codepen here: https://codepen.io/tylerjms7/pen/ZEEvRyV where I’ve used the :target pseudo class as a way of opening and closing a modal.

The problem is when I take that exact same code and apply it to a Wordpress site with Pro on it here: https://goals.brandoncollins.org/test-target it doesn’t work.

Basically the styles aren’t being applied to the :target element for some reason. But I can’t figure out why. The thing that is weird is that if I open that link in a new tab with the #creategp at the end the style will work initially to open the modal. When I click the close icon it also works to remove the styles and hide the modal as expected. But then clicking the modal again won’t work just as before.

So why aren’t the styles being applied? Also, why are they being applied on a new tab?

[friech]

Hi Tyler,

Thank you for writing in, it actually works, see https://goals.brandoncollins.org/test-target/#creategp

The only styling with :target pseudo-class that I see on your sample code is to only make the div creategp visible, which it does.

#creategp:target {
  opacity: 1;
	visibility: visible;
	transition: opacity 1s, visibility 1s;
}

I’m not sure why the button does not work when you click it though. Please contact that code author as we can not provide support for 3rd party plugin and scripts.

I would strongly advise that you utilize the native Content Area Modal element, it’s easier to style and it has a toggle hash option for deep-linking.

• 

Cheers!