Question

我试图隐藏所有文字并在点击按钮上显示叠加层，然后在点击屏幕上的任意位置时能够添加文本并删除叠加层。

由于某种原因，它适用于h1和p元素，但是当添加按钮元素时，它会中断。

这有效：

  <div class="row">
    <div class="col-12">
      <h1 class="contact-title">Portland Based</h1>
    </div>
    <div class="col-12 text-center">
      <button type="button" href="#" class="btn btn-outline-warning letsTalk hidden-xs-down" id="contact">Let's talk</button>
      <p>this works too</p>
      <button type="button" href="#" class="btn btn-warning letsTalk hidden-sm-up">Let's talk</button>
    </div>
  </div>

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    z-index: 10000;
    display: block;
}


$("#contact").on('click', function (e) {
  if (!$('#overlay').length) {
    $('body').append('<div id="overlay"> </div>');
    $('h1').hide();
    $('p').hide();
  }
}).keyup(function (e) {
  if (e.which == 27) {
    $('#overlay').remove();
    $('h1').show();
    $('p').show();
  }
}).blur(function (e) {
  $('#overlay').remove();
  $('h1').show();
  $('p').show();
});
$('body').click(function (e) {
  if (!$(e.target).is('#contact')) {
    $('#overlay').remove();
    $('h1').show();
    $('p').show();
  }
})

这不是：

$("#contact").on('click', function (e) {
  if (!$('#overlay').length) {
    $('body').append('<div id="overlay"> </div>');
    $('h1').hide();
    $('p').hide();
    $('button').hide();
  }
}).keyup(function (e) {
  if (e.which == 27) {
    $('#overlay').remove();
    $('h1').show();
    $('p').show();
    $('button').show();
  }
}).blur(function (e) {
  $('#overlay').remove();
  $('h1').show();
  $('p').show();
  $('button').show();
});
$('body').click(function (e) {
  if (!$(e.target).is('#contact')) {
    $('#overlay').remove();
    $('h1').show();
    $('p').show();
    $('button').show();
  }
})

任何帮助都会很棒！ Codepen here

Answer 1

$("#contact").on('click blur keyup', function (e) {
  if ($('#overlay').length == 0) {
    $('body').append('<div id="overlay"> </div>');
    $('h1').hide();
    $('p').hide();
    $('button').hide();
  }
  if (e.which == 27) {
    $('#overlay').remove();
    $('h1').show();
    $('p').show();
    $('button').show();
  }
});

$('body').click(function (e) {
  if (!$(e.target).is('#contact')) {
    $('#overlay').remove();
    $('h1').show();
    $('p').show();
    $('button').show();
  }
});

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    z-index: 10000;
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
    <div class="col-12">
      <h1 class="contact-title">Portland Based</h1>
    </div>
    <div class="col-12 text-center">
      <button type="button" href="#" class="btn btn-outline-warning letsTalk hidden-xs-down" id="contact">Let's talk</button>
      <p>this works too</p>
      <button type="button" href="#" class="btn btn-warning letsTalk hidden-sm-up">Let's talk</button>
    </div>
  </div>

希望这对您有所帮助:)）

Answer 2

我假设您想要隐藏所有元素。如果我的假设错了，请告诉我！

这是一个快速修复。我没有“手动”隐藏和显示内容，而是将其打包在content div中并相应地切换opacity。

$("#contact").on('click', function (e) {
      if (!$('#overlay').length) {
        $('body').append('<div id="overlay"> </div>');
        $("#content").css({ opacity: "0" });

      }
    }).keyup(function (e) {
      if (e.which == 27) {
        $('#overlay').remove();
        $('#content').css({ 'opacity': '1' });
      }
    }).blur(function (e) {
      $('#overlay').remove();
      $('#content').css({ 'opacity': '1' });
    });
    $('body').click(function (e) {
      if (!$(e.target).is('#contact')) {
        $('#overlay').remove();
        $('#content').css({ 'opacity': '1' });
      }
    })

$("#contact").on('click', function (e) {
      if (!$('#overlay').length) {
        $('body').append('<div id="overlay"> </div>');
        $("#content").css({ opacity: "0" });

      }
    }).keyup(function (e) {
      if (e.which == 27) {
        $('#overlay').remove();
        $('#content').css({ 'opacity': '1' });
      }
    }).blur(function (e) {
      $('#overlay').remove();
      $('#content').css({ 'opacity': '1' });
    });
    $('body').click(function (e) {
      if (!$(e.target).is('#contact')) {
        $('#overlay').remove();
        $('#content').css({ 'opacity': '0' });
      }
    })

Codepen

无法在不破坏脚本的情况下隐藏按钮

2 个答案: