javascript - 在页面加载时删除 CSS 模态闪光

Question

我的页面上有一个 CSS 模式，它会自动被 JS 隐藏，直到单击注册链接为止。我的问题是，当页面加载时，模式会在隐藏之前短暂闪烁。

我在模式上使用了 JS 隐藏功能，但不确定如何在不禁用它在注册点击时显示的能力的情况下防止页面加载时闪烁。

模态 HTML:

<div id="openModal" class="modalDialog">
            <div>
                <a href="#close" id="close">X</a>
                <header><h2>Header</h2></header>
                <form><p>Form Contents</p></form>
            </div>
</div>

隐藏(并在点击时显示)JS:

<script>
              $(document).ready(function(){
                  // Hide Modal by default
              $('#openModal').hide();
                  // Show Modal on click of Signup
              $('#signup').click(function(){ 
                  $('#openModal').fadeIn(500);
              }); 
                  // Hide Modal on click of Close
              $('#close').click(function(){ 
                  $('#openModal').hide();
              }); 
          });
</script>

非常感谢您的帮助。

Answer 1

简单的解决方案是将 display: none 添加到您的 .modalDialog 类中。那么你将不必默认隐藏它($('#openModal').hide(); 行将不是必需的)和 jQuery 的 .show()将覆盖 css。