Question

我的叠加层在页面加载时显示，而不是保持隐藏状态，直到单击“打开”按钮为止。我该如何解决？

$(function() {
  // Onload

  $('.open-overlay').click(function() {
    $('.overlay').fadeIn(500);
  });

  $('.close-overlay').click(function() {
    $('.overlay').fadeOut(500);
  });
});

var body = document.body,
  overlay = document.querySelector('.overlay'),
  overlayBtts = document.querySelectorAll('div[class$="overlay"]');

[].forEach.call(overlayBtts, function(btt) {
  'use strict';
  btt.addEventListener(
    'click',
    function() {
      /* Detect the button class name */
      var overlayOpen = this.className === 'open-overlay';

      /* Toggle the aria-hidden state on the overlay and the no-scroll class
  on the body */
      overlay.setAttribute('aria-hidden', !overlayOpen);
      body.classList.toggle('noscroll', overlayOpen);
      /* On some mobile browser when the overlay was previously opened and
  scrolled, if you open it again it doesn't reset its scrollTop property
  */
      overlay.scrollTop = 0;
    },
    false
  );
});

Answer 1

添加样式显示：无

<div class="overlay" aria-hidden="true" style="display: none">

https://codepen.io/bhnbhushan/pen/mvpLOW

如何使叠加层保持隐藏状态，直到单击为止

1 个答案: