This code works, and without cookies. But I noticed 1) that the random causes that the same banner can be represented more and more, and 2) most important: if you click on some element (like a js automatic menu: you can see it here) the pop-up is re-open.
How avoid mainly this last problem, that can annoy the visitor?
I have disabled the code on my website, because of that problem. You can any way see the automatic js menu.
The CSS :target pseudo-selector matches when the hash in the URL and the id of an element are the same.
IDs are unique which means that the element only remains a target until you click something else and go somewhere different.
Therefore you can open your popup using :target but as soon as any other link in the page is clicked that popup is no longer a target and will be gone.
Using :target to hide and show things is only useful in certain circumstances when you only want one thing to happen and have control of link destinations. It would be useful to say open a side menu so that you could select an item and then the menu vanishes and you go to the menu destination selected.
:target is not useful if you want persistence while other links are clicked on the page or indeed if you have more than one of those types of menus and you want to keep each one open.
If you want persistence you can use the :checkbox hack but in reality a simple JS script would be better and easier to maintain. Or you could use the native details element to hide and show content.
Yes just add a small script or similar for the pop up code. I assume you are showing the pop up by default and then just want it removed when the x is clicked. You could add a unique class to the overlay and then just remove it with js when the x is clicked.