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>

Answer 1

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);
    });

Answer 2

 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>

Answer 3

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

Answer 4

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/