Question

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

要做的事情：

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

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

我尝试使用https://www.w3schools.com/bootstrap/bootstrap_carousel.asp 和https://www.w3schools.com/w3css/w3css_modal.asp。因此，我很难在加载整个页面后的屏幕中间屏幕中间的messagebox / popup / dialogbox中显示模式或轮播

我在这里关注了关于stackoverflow的一些问题。它们涵盖了所有基本内容，但不完全涵盖此特定场景。

Answer 1

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

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

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

这是一个使用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 />，并且不要忘记用您的映像替换它们的映像。

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

保重！

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

1 个答案: