Question

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

我在模态上使用了JS Hide功能，但我不确定如何在页面加载时阻止flash，而不会禁用它在注册点击时显示的功能。

模态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>

非常感谢您的帮助。 d

Answer 1

简单的解决方案是将display: none添加到您的.modalDialog课程中。然后你不必默认隐藏它（$('#openModal').hide();行不是必需的）并且jQuery的.show()将覆盖css。

Answer 2

样式属性：

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

或：

var $ = typeof (jQuery) === 'function' ? jQuery : typeof ($) === 'function' ? $ : false;    
if ($ && $('#openModal').length) $('#openModal').hide();
    $(document).ready(function(){
    //...                  
    });

Answer 3

使用css display：none来隐藏模态。

Answer 4

问题来自代码的这一部分

$(document).ready(function(){

    $('#openModal').hide();

});

等待所有html加载后再触发你的代码，所以隐藏你的模态。

JQuery hide函数正在为元素display:none添加内联样式，因此您可以在dom元素上自行添加此内联样式以避免此闪存

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

在页面加载上删除CSS模态Flash

4 个答案: