setTimeout not working for div to load or anchor

Question

trying to load div after 30 second and code is very simple and ideally it should work. i want to load div content after 30 second so i am trying to click one dummy anchor. i know we can directly load div with settimeout without dummy anchor but it was not working so i tried trigger. i have tried delay and all other function. jquery is already loaded. because when i click them manually they work

 $(document).ready(function() { setTimeout(function() { $('#999').trigger('click'); }, 5000); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href="#popup_chrome" class="popup_chrome" id="999">Chrome Extension</a> <div id="popup_chrome" class="overlay"> <div class="popup"> <h2>Download Chrome Extension</h2><br> <a class="close" href="#">×</a> <div class="content"> <br /><a href="dfdfd" target="_blank" class="myButton_sub">Download</a> </div> </div> </div>

Answer 1

Use a template to hold the popup and then populate some container with the template contents upon timeout:

 $(document).ready(function() { setTimeout(function() { $('#container').html($('#popup_content').html()); }, 4000); });

 #popup_chrome { margin: 15px; width: 50vw; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); border: 1px solid silver; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h5>Wait for it...</h5> <div id="container"></div> <template id="popup_content"> <div id="popup_chrome" class="overlay"> <div class="popup"> <h2>Download Chrome Extension</h2><br> <a class="close" href="#">×</a> <div class="content"> <br /><a href="dfdfd" target="_blank" class="myButton_sub">Download</a> </div> </div> </div> </template>