Question

我有一个网站，我希望新用户在网页加载时看到与我们联系。我尝试了很多方法并获得了叠加层，但隐藏和继续浏览页面的功能无效。

    $(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>

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

Answer 1

有很多方法可以隐藏元素，这是设置

最常见的元素

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方式。

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

另外，您遇到的另一个问题是您运行此代码

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

在呈现按钮元素之前

，因此事件不会附加到它，因为它不存在。您应该在页面准备好时附加它，因此您必须在ready函数内移动它，如下所示：

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

注意区别。

Answer 2

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

将您的jQuery更改为：

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

Fiddle

Answer 3

您有#而不是.。 $('#overlay').fadeOut(200, "linear");将发生在标识overlay而不是类的元素上。如果你写$('.overlay').fadeOut(200, "linear");它将覆盖所有具有叠加类的元素

＆＃13;

    $(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%";
    }

＆＃13;

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

＆＃13;

页面加载叠加

3 个答案: