how to show an Image PopUp after Page Load

Question

This code is used to create popups on websites. After clicking on the close button once, the popup box goes away but after 3 seconds the fire comes again. I only want this 1 time, not over and over again

            $(document).ready(function(){
            setTimeout(function(){
                $('#popUp').css('display','block'); }, 3000);
            }); 

        $('.close-popup').click(function(){
            $('#popUp').css('display','none');
        });

<div id="popUpmain">
        <form action="">
            <div id="popUp" style="display:none">
                <h1 class="popUp-heading">Sign Up</h1>
                <input type="text" class="pop-up-name" placeholder="Your Name">
                <input type="text" class="pop-up-email" placeholder="Email">
                <input type="text" class="pop-up-number" placeholder="Number">
                <select name="Select Product" id="" class="popup-select">
                    <option value="Select Product active">Select Product</option>
                    <option value="Mattress">Mattress</option>
                    <option value="Select Product active">Comforter</option>
                    <option value="Select Product active">pillow</option>
                </select> 
                <input type="submit" class="popup-btn close-popup">
                <button class="close-btn close-popup">Not Now</button>
            </div>
        </form>
    </div>

Somehow the page is getting reloaded again. Everytime the page gets reloaded, the `load` event gets triggered and after 3 seconds of page load event, this popup shows in. — Robin Mollah, Jun 17 '21 at 21:18

score 0 · Answer 1 · answered Jun 17 '21 at 21:24

0

try changing your js to this:

basically, you set the timeout function to a variable and then when you close the popup you clear the timeout

 $(document).ready(function(){
      var popup =   setTimeout(function(){
            $('#popUp').css('display','block'); }, 3000);
        }); 

    $('.close-popup').click(function(){
        $('#popUp').css('display','none');
          clearTimeout(popup);
    });

answered Jun 17 '21 at 21:24

DCR

14,737
12
52
115

If you provide a working snippet I'll take a closer look. Do you get any kind of error in the console? – DCR Jun 17 '21 at 21:37
no, there is no error in the console. When you close the pop, it goes away but comes back again after 3 seconds that is the problem – Khandaker Ajmain Ingqiyad Jun 17 '21 at 21:45
I just updated the snippet below this. Looks like it's now working. Needed to change the scope of the on load – DCR Jun 17 '21 at 21:53

DCR · Answer 2 · 2021-06-17T23:11:09.200

var cnt = 0;
$(document).ready(function(){
      cnt++;
      console.log('alert'+ cnt)
      var popup =   setTimeout(function(){
            $('#popUp').css('display','block'); }, 3000);
        

    $('.close-popup').click(function(){
        $('#popUp').css('display','none');
          clearTimeout(popup);
          
    }) });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="popUpmain">
        <form action="">
            <div id="popUp" style="display:none">
                <h1 class="popUp-heading">Sign Up</h1>
                <input type="text" class="pop-up-name" placeholder="Your Name">
                <input type="text" class="pop-up-email" placeholder="Email">
                <input type="text" class="pop-up-number" placeholder="Number">
                <select name="Select Product" id="" class="popup-select">
                    <option value="Select Product active">Select Product</option>
                    <option value="Mattress">Mattress</option>
                    <option value="Select Product active">Comforter</option>
                    <option value="Select Product active">pillow</option>
                </select> 
                <input type="submit" class="popup-btn close-popup">
                <button type ='button' class="close-btn close-popup">Not Now</button>
            </div>
        </form>
    </div>

Can you explain why this answer has been posted twice? I'm not seeing the distinction between the two answers. — devlin carnate, Jun 17 '21 at 21:49
Ok, thanks for clarifying. It would be helpful if you added some text to explain the answer — devlin carnate, Jun 17 '21 at 22:01

score 0 · Answer 3 · 2021-06-17T22:31:56.467

It's because of your 'not now' button.

<div id="popUpmain">
    <form action="">
        <div id="popUp" style="display:none">
            <h1 class="popUp-heading">Sign Up</h1>
            <input type="text" class="pop-up-name" placeholder="Your Name">
            <input type="text" class="pop-up-email" placeholder="Email">
            <input type="text" class="pop-up-number" placeholder="Number">
            <select name="Select Product" id="" class="popup-select">
                <option value="Select Product active">Select Product</option>
                <option value="Mattress">Mattress</option>
                <option value="Select Product active">Comforter</option>
                <option value="Select Product active">pillow</option>
            </select> 
            <input type="submit" class="popup-btn close-popup">
            <!--<start of problem> -->
            <button class="close-btn close-popup">Not Now</button>
            <!--<end of problem> -->
        </div>
    </form>
</div>

If you change the above:

<button class="close-btn close-popup">Not Now</button>

To:

<button type="button" class="close-btn close-popup">Not Now</button>

It will prevent the button from submitting the form, avoiding a post-back.), preventing the document reloading, re-triggering the $(document).ready(function() call.

Button types:

https://www.w3schools.com/tags/att_button_type.asp

Thank you. Can you give me another salve now? When I came back to the home page after visiting other pages of the website, it popped up again. I wanted the web site to show popup only first time loading time. It Will not show even if reloaded at another time.. link this website "https://www.livpuresleep.com/" — Khandaker Ajmain Ingqiyad, Jun 17 '21 at 23:21
Then you’ll need some form of persistent storage to keep track of their choice to see it. Cookies/Sessions/User account settings may be what you’re looking for. — , Jun 17 '21 at 23:25

Mohamed Allal · Answer 4 · 2021-06-17T22:29:39.457

Your code as made at first follow the right logic!

There is something that you are missing!

This something is that the button is within a form! And by default will submit the form!

Which means at submit, it will refresh the page! And so the page load again! And ready event will get executed again! Which will fire again! And it gonna be an infinit loop if you try the same thing again! By clicking the button again!

You can prevent that using e.preventDefault():

$('.close-popup').click(function(e){
    e.preventDefault(); // <<<< here
    $('#popUp').css('display','none');
});

https://api.jquery.com/event.preventdefault/

And here a playground for your code! Even though it's straight forward!

https://jsfiddle.net/mkpzrg3j/1/

how to show an Image PopUp after Page Load

4 Answers4