使用javascript或bootstrap加载整个页面后打开对话框或弹出框或消息框

Question

我有jsp / javascript页面，它显示了一些基于某些业务逻辑的内容。此页面加载从数据库中提取的一些数据。有时页面加载可能需要更多时间。所以没有具体的时间。

要做的事：

加载整个页面后，在屏幕中间显示一个弹出/消息框/对话框。应该有关闭或“X”按钮关闭。

弹出/消息框/对话框是4-5个屏幕/内容消息的序列。意思是一旦弹出窗口显示第一个内容，那么该弹出屏幕中应该有“下一个”或“>”类型的图标。点击它应该进入下一个屏幕或内容。当您到达最后的内容或屏幕时，您应该能够回滚到第一条消息。

我尝试过使用https://www.w3schools.com/bootstrap/bootstrap_carousel.asp和https://www.w3schools.com/w3css/w3css_modal.asp。有了这个，我很难在整个页面加载后在屏幕中间的消息框/弹出/对话框中显示模态或轮播

我在stackoverflow上关注了一些问题。它们涵盖了所有基本的东西，但不完全是这个特定的场景。

Answer 1

如果你使用W3.CSS模态，他们在this page的第一个例子中有一点提示。在按钮的onclick属性中，有一个小的Javascript代码段：

document.getElementById('id01').style.display='block'

要在页面加载完成后获得该行为，您可以将其放入window对象上的事件侦听器，该对象等待load事件MDN doc。

这是使用W3.CSS模式页面中的样板的一个小例子：

<!-- In your HTML -->
<div id="id01" class="w3-modal">
  <div class="w3-modal-content">
    <div class="w3-container">
      <span
        onclick="document.getElementById('id01').style.display='none'"
        class="w3-button w3-display-topright">
        &times;
      </span>
      <p>Where your carousel goes</p>
    </div>
  </div>
</div>

/* 
  In a <script/> tag below the rest of your imported scripts
  or in a separate, linked .js file.
*/

window.addEventListener('load', function() {
  document.getElementById('id01').style.display = 'block';
});

就旋转木马而言，您可以使用相关代码替换模态内的<p />元素。我首先复制/粘贴W3Schools幻灯片example。确保包含使用Bootstrap所需的<link />和<script />，不要忘记用你的图像替换它们的图像。

如果您需要更多帮助，请提供一些代码，以便人们更好地了解您的问题。

照顾自己！