Предотвратить модальное мигание во время загрузки страницы - PullRequest
Новая
       108

Предотвратить модальное мигание во время загрузки страницы

1 голос
/ 02 мая 2020

Я отсканировал несколько других постов, касающихся этого, но, к сожалению, я не могу найти рабочее решение.

Любая помощь очень ценится.

Я пытаюсь остановить кратковременное мигание видимости модалов пока страница загружается. У меня есть 3D-модель, которая загружается с использованием OpenwebGL, поэтому нужно несколько секунд для загрузки. Мигающие при старте модалы выглядят неопрятно.

Я не уверен, что лучший способ остановить загрузку модалов до завершения загрузки 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>

1 Ответ

0 голосов
/ 04 мая 2020

Я снова.

Хорошо, оцените множество вопросов на форуме относительно этой топики c, но не нашли подходящего варианта.

Я в конце концов нашел решение, используя следующие из различных идей объединены.

Так что для тех, кто пытается решить эту проблему в будущем, попробуйте следующее:

Поместите модальные 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>
...