使用纯javascript加载页面上的模态弹出窗口

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中，但您也可以使用vanilla js）。

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

一旦你显示模态，你可以设置一个timeOut函数setTimeout(hideModal, 500)在哪里

hideModal - 隐藏你的模态的功能

500 - 在ms中执行函数之后的超时时间

Answer 2

为模态及其背景创建dom元素。最初添加一个类show然后使用setTimeout在3秒后从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>