如何在页面加载后显示图像弹出窗口

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/