防止页面加载期间模态闪烁

问题描述 投票：1回答：1

我已经扫描了与此相关的其他几篇文章，但我很难过地找到可行的解决方案。

非常感谢任何帮助。

我正在尝试在页面加载时短暂停止模式闪烁的可见性。我有一个使用OpenwebGL加载的3D模型，因此需要几秒钟的加载时间。一开始闪烁的模态看起来不整洁。

我不确定在3D模型完成加载之前停止加载模态的最佳方法。

这是页面的HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Verge3D Web Interactive</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  
  <meta property="og:type" content="website">

  <meta name="generator" content="Verge3D 3.0.1">

  <script src="ie_compat.js"></script>
  <script src="webxr-polyfill.js"></script>
  <script>var polyfill = new WebXRPolyfill();</script>
  <script src="ammo.js"></script>

  <script src="v3d.js"></script>
  <script src="City_20_01c.js"></script>
  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  <link rel="stylesheet" type="text/css" href="City_20_01c.css">
  
</head>

<body>
  <div id="container">
    <div id="fullscreen_button" class="fullscreen-button fullscreen-open" title="Toggle fullscreen mode"></div>
  </div>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal01" role="dialog" >
    <div class="modal-dialog" style="display:none">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Add any html and CSS Element here.  Images , Video, Text, etc</p>
		  </br>
  <img src="http://avologypro.com/wp/expleo/wp-content/uploads/2020/02/Screenshot-2020-02-09-13.25.13.png"  width="325px" height="170px"> 
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
<div class="container">
  <h2>Modal Example 02</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal02" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Automotive 02</p>
		  <p>Add any html and CSS Element here.  Images , Video, Text, etc</p>
		  </br>
          <img src="http://avologypro.com/wp/expleo/wp-content/uploads/2020/02/Screenshot-2020-02-09-13.25.13.png"  width="325px" height="170px"> 
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>
	

</body>

</html>
javascript html modal-dialog hide
1个回答
0
投票

又是我。

确定，谢谢论坛上有关此主题的许多问题，但找不到合适的答案。

[我最终结合以下各种想法找到了一种解决方案。

因此，对于将来尝试解决此问题的其他任何人，请尝试以下操作：

将模式div放入新的div。使用标题中的样式注释使父div不可见。将此添加到开头正文注释onload =“ showdiv（）;”，然后在您的身体底部添加一个功能showdiv脚本。

这里是与上述HTML相同的新调整：

<!DOCTYPE html>

<html lang="en">
<head>
  <title>Verge3D Web Interactive</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

 
  <meta property="og:image" content="https://cdn.soft8soft.com/images/player_socials.jpg">
  <meta property="og:type" content="website">

  <meta name="generator" content="Verge3D 3.0.1">

  <!-- favicons -->
  <link rel="apple-touch-icon" sizes="180x180" href="media/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="media/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="media/favicon-16x16.png">
  <link rel="manifest" href="media/manifest.json">
  <link rel="mask-icon" href="media/safari-pinned-tab.svg" color="#5bbad5">
  <meta name="theme-color" content="#ffffff">

  <script src="ie_compat.js"></script>
  <script src="webxr-polyfill.js"></script>
  <script>var polyfill = new WebXRPolyfill();</script>
  <script src="ammo.js"></script>
  

  
  <script src="v3d.js"></script>
  <script src="City_20_01c.js"></script>
  <link rel="stylesheet" type="text/css" href="City_20_01c.css">
  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  
  <style>
        #modaloff {
            visibility: hidden;
        }
    </style>


</head>

<body onload="showdiv();">

  <div id="container">
    <div id="fullscreen_button" class="fullscreen-button fullscreen-open" title="Toggle fullscreen mode"></div>
  </div>

<div id="modaloff">
 <div class="container" id="modaloff01" >
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal01" role="dialog" >
    <div class="modal-dialog" >
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Add any html and CSS Element here.  Images , Video, Text, etc</p>
		  </br>
  <img src="http://avologypro.com/wp/expleo/wp-content/uploads/2020/02/Screenshot-2020-02-09-13.25.13.png"  width="325px" height="170px"> 
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
    </div>
  
<div class="container">
  <h2>Modal Example 02</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal02" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header 02</h4>
        </div>
        <div class="modal-body">
          <p>Automotive 02</p>
		  <p>Add any html and CSS Element here.  Images , Video, Text, etc</p>
		  </br>
          <img src="http://avologypro.com/wp/expleo/wp-content/uploads/2020/02/Screenshot-2020-02-09-13.25.13.png"  width="325px" height="170px"> 
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>
</div>

<script>
    function showdiv() {
        setTimeout(function () {
            document.getElementById("modaloff").style.visibility = "visible";
        }, 5000);
    }
</script>

</body>

</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.