如何创建时间延迟模态（最好使用HTML，JQuery，CSS）

Question

I want to create a 5s time delay modal like this

I have done many googling and research but have been stuck with creating a modal like this that is not triggered by a button. I tried following the instructions (using just javascript) from W3Schools https://www.w3schools.com/bootstrap/bootstrap_ref_js_modal.asp and https://www.w3schools.com/howto/howto_css_modals.asp but nothing works. And both are trigged by a button.

I don't know if it is because I am using JQuery codes for featherlight and slider. I also tried following the site https://www.sitepoint.com/show-modal-popup-after-time-delay/ but nothing pops up. I will appreciate a lot someone can kindly help and provide me with relevant scripts/css/js codes as I am quite new to coding. Thank you so much!

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

I also tried using http://jquerymodal.com/ but does not work from a button nor I know how to use that with the settimeout function without using a button to trigger the modal box.

Answer 1

Please upload your code as well to see where you are wrong, Your approach is good but while questioning make sure that all elements are covered the languages tags, the reference and your code

Mostly these modals are used to display newsletters or any discount a site has to offer

The code at the reference website looks good

You can put the code at end before the closing body tag in the script which will display the newsletter once the page is loaded and then add the time delay you want to set

Answer 2

Assuming you want a modal that will automatically hide or disappear after a certain timeout, here's a JsFiddle that does it.

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

EDIT:: If you want your modal to load when the page loads (Not triggered by a button) you can just do:

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