使用純JavaScript在Pageload上出現模式彈出窗口

Question

我想知道如何在不使用jquery或boostrap但使用javscript的情況下創建模態彈出窗口。 模態彈出窗口應僅在頁面加載時顯示30秒並自動關閉。 嘗試過使用jquery和bootstrap，但需要在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

首先，每當您執行任何ui操作（例如打開模式，訪問dom節點等）時，請始終等待文檔被加載。 （示例在Jquery中，但是您也可以使用普通js）。

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

顯示模態后，您可以設置一個timeOut函數setTimeout(hideModal, 500) ，其中

hideModal隱藏模態的函數

500 - 您希望以ms為單位執行該功能的超時時間

Answer 2

為模式及其背景創建dom元素。 最初添加一個類show然后在3秒鍾后使用setTimeout從classList中刪除該類

 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>