如何在頁面加載后顯示圖像彈出窗口

Question

此代碼用於在網站上創建彈出窗口。 單擊一次關閉按鈕后，彈出框消失，但 3 秒后又起火。 我只想要這一次，而不是一遍又一遍

            $(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

嘗試將您的 js 更改為：

基本上，您將超時函數設置為變量，然后在關閉彈出窗口時清除超時

 $(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

這是因為你的“不是現在”按鈕。

<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>

如果您更改上述內容：

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

至：

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

它將阻止按鈕提交表單，避免回發。)，阻止文檔重新加載，重新觸發$(document).ready(function()調用。

按鈕類型：

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

Answer 4

您最初制作的代碼遵循正確的邏輯！

有一些東西你錯過了！

這就是按鈕在表單中！ 並且默認會提交表單！

這意味着在提交時，它將刷新頁面！ 所以頁面再次加載！ ready事件將再次執行！ 哪個會再次火起來！ 如果你再次嘗試同樣的事情，它將會是一個無限循環！ 再次點擊按鈕！

您可以使用e.preventDefault()防止這種情況：

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

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

這里是您代碼的游樂場！ 盡管它是直截了當的！

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