页面加载覆盖

我有一个网站，我希望新用户在加载页面时看到与我们联系。我尝试了很多方法并获得覆盖，但是隐藏并继续进入页面的功能无法正常工作。页面加载覆盖

$(document).ready(function() { 
 
     $('#overlay').fadeIn(); 
 
    }); 
 
    $('button').click(function() { 
 
     $('#overlay').fadeOut(200, "linear"); 
 
    }); 
 
    function openNav() { 
 
     document.getElementById("myNav").style.height = "100%"; 
 
    } 
 

 
    function closeNav() { 
 
     document.getElementById("myNav").style.height = "0%"; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html><head> 
 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
 
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script> 
 
</head> 
 
    <body> 
 
    <div id="myNav" class="overlay"> 
 
    <h1>Text</h1> 
 
    <button>hide</button> 
 
    </div> 
 
    </body> 
 
</html>

如果关闭弹出窗口的任何建议，请存在共享。

来源

2017-07-26 cowlthor

还有一堆的方法来隐藏元素，是最常见的一种设置

document.getElementById("myNav").style.display = "none";

并再次显示它

// Empty to have the one specified by CSS or the element default. 
// Or "block", "inline", "inline-block"... Whatever fits you better. 
document.getElementById("myNav").style.display = "";

如果隐藏除以身高（是个好如果你有一个CSS转换，但你需要固定的高度），你需要将元素溢出设置为隐藏。默认情况下，如果一个元素的内容大于元素大小，它将显示，所以你的.overlay类应该有overflow: hidden来隐藏它。

顺便说一句，您正在使用动态高度，所以你没有使用转换。作为建议，请改用display。

编辑：只要注意the ID problem @Rubenxfd指出。他是对的。肯定会成为主要问题。

而且，你有另外一个问题是，在运行此代码

$('button').click(function() { 
    $('#overlay').fadeOut(200, "linear"); 
});

按钮元件之前被渲染，因此事件不会重视它，因为它不存在。你应该重视它时，页面已经准备好，所以你必须把它移到了ready函数内部，就像这样：

$(document).ready(function() { 
    $('#myNav').fadeIn(); 
    $('button').click(function() { 
    $('#myNav').fadeOut(200, "linear"); 
    }); 
});

注意到其中的差别。

来源

2017-07-26 06:35:49

固定覆盖类，并添加就绪功能解决了这一问题的。谢谢 – cowlthor

您正在使用class，但在您的jQuery中调用了id。

改变你的jQuery这样的：

$(document).ready(function() { 
     $('.overlay').fadeIn(); 
    }); 
    $('button').click(function() { 
     $('.overlay').fadeOut(200, "linear"); 
    });

Fiddle

来源

2017-07-26 06:36:11 Rubenxfd

你有#而不是.。 $('#overlay').fadeOut(200, "linear");将发生在ID为overlay的元素不在课程中。如果你写$('.overlay').fadeOut(200, "linear");它会发生在所有的元素与类覆盖

$(document).ready(function() { 
 
     $('.overlay').fadeIn(); 
 
    }); 
 
    $('button').click(function() { 
 
     $('.overlay').fadeOut(200, "linear"); 
 
    }); 
 
    function openNav() { 
 
     document.getElementById("myNav").style.height = "100%"; 
 
    } 
 

 
    function closeNav() { 
 
     document.getElementById("myNav").style.height = "0%"; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html><head> 
 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
 
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script> 
 
</head> 
 
    <body> 
 
    <div id="myNav" class="overlay"> 
 
    <h1>Text</h1> 
 
    <button>hide</button> 
 
    </div> 
 
    </body> 
 
</html>

来源

2017-07-26 06:39:23 Colin

哪个评论？ – Rubenxfd

对不起，我删除了它，因为在评论框中没有可用的格式错误，因为CTRL + K不可用。 – Colin

好吧，有人ninjadownvv解决了它，但没有解释什么时候，实际上是一个很好的答案。去+1它来抵消它。讨厌忍者downvoters： -/ –

页面加载覆盖

回答

相关问题