Open modal pop-up automatically when opening the site only once

Question

Open modal pop-up automatically when opening the site only once

Asked 4 years, 5 months ago

Viewed 610 times

1

I have a Modal window that should open only once when opening the site.

Below, I have the button I use to open the Modal screen, in addition to the responsible div, I need this button to run the first time the site is opened only. How can I be doing this?

<a href="#openModal">Open Modal</a>

<div id="openModal" class="modalDialog">
    <div>
        <a href="#close" title="Close" class="close">X</a>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/joNF3vycKsA?controls=0" id="iframe_callback" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        <!-- Conteúdo do Modal -->
    </div>
</div>

Below follows CSS code:

.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}
.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}
.modalDialog > div {
    width: 560px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
}
.close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; }

I suggest you modify the question to facilitate understanding, so I understand you want to open the modal along with the site, for this you should use the attribute 'onload' to trigger the opening event. If you want it to appear only on the first visit, you can use cookies, the correct is to use Session, but it will not serve for this purpose.

– Macedo_Montalvão

2020/07/20 at 04:33
I don’t know much about Javascript, could you give me an example? Right, that would be right.

– Agnaldo Junior

2020/07/20 at 10:19
i would reply, see first these options: https://stackoverflow.com/questions/36004108/load-popup-onload | maybe I can help you.

– Macedo_Montalvão

2020/07/21 at 21:24

1 answer

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.

by Rodrigo Carvalho de Brito • **379** points · Answer 1 · 2020-07-20T02:13:08+00:00

You can use jQuery’s remove or Detached function to perform this function after the modal close click. The remove will delete permanently, turning off the DOM element, while Detached will remove but will keep the associated data still in the DOM if any use of these is required. It would be very simple to implement:

$("#close").on("click", function(){
     $("#openModal").remove(); 
});