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
});

一旦显示了模态，就可以设置超时功能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>

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

2 个答案: