使用javascript或引导程序加载整个页面后，打开对话框、弹出或消息框。

Question

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

要做的事情：

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

弹出/消息框/对话框是由4-5个屏幕/内容消息组成的序列。这意味着，一旦弹出窗口显示第一个内容，就应该在弹出屏幕中出现"next“或">”类型的图标。点击它应该继续到下一个屏幕或内容。当您到达最后的内容或屏幕时，您应该能够回滚回第一条消息。

我试过使用carousel.asp和modal.asp。有了这一点，我很难在的messagebox/popup/dialogbox中显示模态或旋转木马，在整个页面加载之后，显示屏幕中部。

我在这里跟踪了一些关于堆栈溢出的问题。它们涵盖了所有的基本情况，但并不完全是这种特定的情况。

Answer 1

如果您使用W3.CSS模式，在此页上的第一个示例中有一些提示。在按钮上的onclick属性中，有一个Javascript片段：

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

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

下面是使用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幻灯片示例。请确保包含使用引导带所需的<link />和<script />，并且不要忘记用您的映像替换它们的图像。

如果您需要更多的帮助，请包括您的一些代码，因为人们有更好的洞察您的问题。

保重!