[英]Prevent modal from flashing during page loading
我已經掃描了其他幾篇與此相關的帖子，但遺憾的是我無法找到可行的解決方案。
非常感謝任何幫助。
我試圖在頁面加載時暫時停止模態閃爍可見性。 我有一個使用 OpenwebGL 加載的 3D model，所以需要幾秒鍾才能加載。 一開始閃爍的模態看起來很不整齊。
在 3d model 完成加載之前，我不確定阻止模態加載的最佳方法。
這是頁面的 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">×,</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">×.</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>
又是我。
好的，感謝論壇上有關此主題的很多問題，但沒有找到合適的答案。
我最終從各種想法的結合中找到了一個解決方案。
因此，對於將來嘗試解決此問題的其他人，請嘗試以下操作：
將模態 div 放入一個新的 div 中。 使用 header 中的樣式注釋使父 div 不可見。 將此添加到開頭的正文注釋 onload="showdiv();"，然后在正文底部添加 function 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">×:</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">×.</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>
如何防止 React 函數組件在異步請求期間閃爍
[英]How to prevent React function component from flashing during async request
當暗模式處於活動狀態時，如何防止頁面在頁面轉換之間閃爍為其原始的光模式樣式
[英]How to prevent page from flashing to its original lightmode style between page transitions when darkmode is active
防止引導程序* open *模式在運行時單擊bg時關閉
[英]Prevent a bootstrap *open* modal from closing on bg click during runtime
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.