簡體   English   中英

如何創建時間延遲模態(最好使用HTML,JQuery,CSS)

[英]How to create a time delay modal (preferably using HTML, JQuery, CSS)

我想創建一個5s的延時模式

在此處輸入圖片說明

我做了很多谷歌搜索和研究工作,但一直堅持創建這樣一個模態,該模態不是由按鈕觸發的。 我嘗試按照W3Schools https://www.w3schools.com/bootstrap/bootstrap_ref_js_modal.asphttps://www.w3schools.com/howto/howto_hows_css_modals.asp上的說明進行操作(僅使用JavaScript),但沒有任何效果。 兩者都可以通過按鈕觸發。

我不知道是否是因為我正在為羽毛燈和滑塊使用JQuery代碼。 我還嘗試關注該網站https://www.sitepoint.com/show-modal-popup-after-time-delay/,但沒有任何提示。 我將不勝感激,有人可以提供幫助,並為我提供相關的腳本/ css / js代碼,因為我是編碼的新手。 非常感謝!

<div class="modal">
            <div class="modal-content">
            <span class="closebtn">&times;</span>
            <h4>WELCOME</h4>
            <label for="email">Don't miss out on the latest updates!</label>
            <input placeholder="enter your email here" id="email">
            <button class="subscribe">SUBSCRIBE</button>
            </div>
        </div>

我也嘗試過使用http://jquerymodal.com/,但不能通過按鈕使用,也不知道如何在不使用按鈕觸發模式框的情況下將settimeout函數與之配合使用。

請也上傳您的代碼,以查看您在哪里出錯。您的方法不錯,但在詢問時請確保所有元素都覆蓋在language標記,參考和代碼中

通常,這些模式用於顯示新聞通訊或網站必須提供的任何折扣

參考網站上的代碼看起來不錯

您可以將代碼放在腳本中結束body標記之前,在頁面加載后將顯示新聞稿,然后添加要設置的時間延遲

假設您想要一個在一定的超時后將自動隱藏或消失的模式,下面是一個JsFiddle可以做到的。

$(document).ready(function(){
  $('#modal').click(function(){
    $('#exampleModal').modal('show');
     setTimeout(function() {$('#exampleModal').modal('hide');}, 
      1000);
    }); 
  });

編輯::如果您希望您的模式在頁面加載時加載(不是由按鈕觸發),您可以執行以下操作:

$(document).ready(function(){           
  $('#exampleModal').modal('show');
    setTimeout(function() {$('#exampleModal').modal('hide');}, 
          1000);
   }); 

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM