使用纯JavaScript在Pageload上出现模式弹出窗口

Question

I would like to know how to create a modal popup without using jquery or boostrap but using javscript. Modal popup should show only on page load for 30 sec and close automatically. have tried using jquery and bootstrap but need to create in javascript

<script>
     $(document).ready(function () {
     $('.modal').modal('show');
      });
  </script>

 <div id="myModal" class="modal fade" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times; 
            </button>
            <h4 class="modal-title">Load Bootstrap modal on page launch</h4>
          </div>
        <div class="modal-body">
          <p>
           This is a simple Demo to launch a model on page load.
          </p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data- 
           dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

Answer 1

Firstly, whenever you perform any ui operations (such as Opening a modal, accessing dom nodes, etc etc), always wait for the document to be loaded. (The example is in Jquery but you can use vanilla js too).

$(document).ready(function () {
 // Perform your operations here
});

Once you show the modal, you could setup a timeOut function setTimeout(hideModal, 500) where

hideModal - The function which hides your modal

500 - Timeout period after which you want to execute the function in ms

Answer 2

Create dom elements for modal and its background. Initially add a class show then use setTimeout to remove the class from classList after 3 secs

 setTimeout(() => { document.getElementsByClassName('modalContainer')[0].classList.remove('show'); }, 3000) 

 .mainContainer, .modalContainer { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center } .modalContainer { background: black; opacity: 0.5; z-index: 10; display: none; } .modal { width: 200px; height: 200px; z-index: 15; background: red; } .show { display: flex; } body, html { height: 100%; width: 100%; } 

 <div class='mainContainer'> <div class='modalContainer show'> <div class='modal'>Here is the modal</div> </div> </div>