Simple pop-up

[web148]

I managed to realize a very simple pop-up, with this code:

css

.popup {
    margin: 70px auto;
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    width: 40%;
    max-height: 80vh;
    position: relative;
    transition: all 5s ease-in-out;
    z-index: 20;
}

.popup img {max-height: 40vh;}

.popup .close {
    position: absolute;
    top: 20px;
    right: 30px;
    transition: all 200ms;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    color: #333;
}

.popup .close:hover {
    color: orange;
}

.popup .content {
    max-height: 90%;
    overflow: auto;
}

.overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
/*     min-height: 100vh; */
    background: rgba(0, 0, 0, 0.7);
    z-index: 19;
}

/* These are the rules you are looking for. */
.overlay {
    transition: opacity 500ms;
    opacity: 1;
    pointer-events: all;
}

.overlay:target {
    opacity: 0;
    pointer-events: none;
}

  @media only screen and (max-width: 480px) {
      .popup {
        zoom: 85%;
        max-height: 90vh;
      }
      .popup img {max-width: 50vw;}
      .popup .close {display: block; top: 1%;}
    }

php/html

<div id="popup1" class="overlay">
    <div class="popup" >
    
    <?php
  $banner1="mybanner";
  $banner2="mybanner";
  $banner3="mybanner";
  $banners = array($banner1, $banner2, $banner3);
  shuffle($banners);
  
  echo $banners[0]; ?>
                
    </div>
</div>

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?

EDIT

I have disabled the code on my website, because of that problem. You can any way see the automatic js menu.

[m_hutley]

I dont… see what you mean by “automatic js menu”. Possibly because the javascript isnt loading?

[web148]

Any way I have re-activivated the pop-up, so that you can see it working (and too working, so to say , with the automatic menu).
Thanks

[m_hutley]

@web148

You see that.

I see this:

You sure we’re looking at the same page?

[web148]

Sorry: try this https://www.culturanuova.net/filosofia/2.medioevale/Anselmo.php

[m_hutley]

Okay, so what’s happening is this:

Your CSS says:

@web148

.overlay:target {
    opacity: 0;
    pointer-events: none;
}

“When the target of the page (the #hash) is the overlay element; hide it.”

The overlay close button, points the hash at the overlay (well, at popup1, which has the class overlay):

<a class="close" href="#popup1">×</a>

Your menu is using the same trick to hide and show its subelements:

<a href="#titolo" class="active">Riletture filosofiche</a>

So when you click on that, the target changes to #titolo… and it’s no longer the overlay. So the overlay stops hiding.

You cant have multiple separate hash-tricks working at the same time, because the URL only has 1 hash value.

[web148]

I don’t understand fully your words, but my question is: could I avoid that annoying behavior? And if so, how?
Thank you!

[PaulOB]

@web148

I don’t understand fully your words,

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.

[web148]

But the automatic js menu is … automatic, and I don’t know how to convert it…

[web148]

I guess that I should change the pop-up code, instead of the menu one …

[PaulOB]

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.

Here’s a similar old demo using the checkbox hack and here’s one using js .

I’ve just added a demo using your pop up code.

Hope that helps.

[web148]

Sorry. I didn’t yet see your answer, and meanwhile I realized a new solution (you can see it on my website www.culturanuova.net).
I will see if your suggestion fit better my needs.
Thank you!

[web148]

I would need some further help:

1. first of all the size of pop-up is not enough responsive, and overflow is annoying,
2. moreover the random is not well working (the same variable often repeated): how could I have a ordered succession of variables?
3. Maybe it is too a pop-up every page (/every hour of the day): what about?