Javascript Can'；在不破坏脚本的情况下隐藏按钮

我试图隐藏所有文本并在点击按钮时显示覆盖，然后在点击屏幕上的任何位置时可以添加文本并删除覆盖

出于某种原因，它与h1和p元素一起工作，但添加button元素时，它会中断

这项工作：

  <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();
  }
})

波特兰的
让我们谈谈
这也行

让我们谈谈
#覆盖层{
位置：固定；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景色：#000；
过滤器：α（不透明度=50）；
-moz不透明度：0.5；
-khtml不透明度：0.5；
不透明度：0.5；
z指数：10000；
显示：块；
}
$（“#联系人”）。在（'click'，函数（e）{
如果（！$（'#叠加'）。长度）{
$（'body'）。追加（''）；
$（'h1'）.hide（）；
$（'p'）.hide（）；
}
}).keyup（功能（e）{
如果（e.which==27）{
$（“#覆盖”）.remove（）；
$（'h1'）.show（）；
$（'p'）.show（）；
}
}).blur（函数（e）{
$（“#覆盖”）.remove（）；
$（'h1'）.show（）；
$（'p'）.show（）；
});
$（'body'）。单击（函数（e）{
如果（！$（e.target）.is（“#联系”））{
$（“#覆盖”）.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();
  }
})

$（“#联系人”）。在（'click'，函数（e）{
如果（！$（'#叠加'）。长度）{
$（'body'）。追加（''）；
$（'h1'）.hide（）；
$（'p'）.hide（）；
$（'button'）.hide（）；
}
}).keyup（功能（e）{
如果（e.which==27）{
$（“#覆盖”）.remove（）；
$（'h1'）.show（）；
$（'p'）.show（）；
$（'button'）.show（）；
}
}).blur（函数（e）{
$（“#覆盖”）.remove（）；
$（'h1'）.show（）；
$（'p'）.show（）；
$（'button'）.show（）；
});
$（'body'）。单击（函数（e）{
如果（！$（e.target）.is（“#联系”））{
$（“#覆盖”）.remove（）；
$（'h1'）.show（）；
$（'p'）.show（）；
$（'button'）.show（）；
}
})

任何帮助都会很好！代码笔

$（“#联系人”）。在（'click blur keyup'，函数（e）{
if（$（'#overlay'）。长度==0）{
$（'body'）。追加（''）；
$（'h1'）.hide（）；
$（'p'）.hide（）；
$（'button'）.hide（）；
}
如果（e.which==27）{
$（“#覆盖”）.remove（）；
$（'h1'）.show（）；
$（'p'）.show（）；
$（'button'）.show（）；
}
});
$（'body'）。单击（函数（e）{
如果（！$（e.target）.is（“#联系”））{
$（“#覆盖”）.remove（）；
$（'h1'）.show（）；
$（'p'）.show（）；
$（'button'）.show（）；
}
});
#覆盖{
位置：固定；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景色：#000；
过滤器：α（不透明度=50）；
-moz不透明度：0.5；
-khtml不透明度：0.5；
不透明度：0.5；
z指数：10000；
显示：块；
}

波特兰的
让我们谈谈
这也行

让我们谈谈
我假设您想隐藏所有元素。如果我的假设是错误的，让我知道

这里有一个快速解决方案。我没有“手动”隐藏和显示内容，而是将其包装在
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' });
      }
    })

$（“#联系人”）。在（'click'，函数（e）{
如果（！$（'#叠加'）。长度）{
$（'body'）。追加（''）；
$（“#内容”）.css（{opacity:“0”}）；
}
}).keyup（功能（e）{
如果（e.which==27）{
$（“#覆盖”）.remove（）；
$（'content'）.css（{'opacity'：'1'}）；
}
}).blur（函数（e）{
$（“#覆盖”）.remove（）；
$（'content'）.css（{'opacity'：'1'}）；
});
$（'body'）。单击（函数（e）{
如果（！$（e.target）.is（“#联系”））{
$（“#覆盖”）.remove（）；
$（'content'）.css（{'opacity'：'1'}）；
}
})
$（“#联系人”）。在（'click'，函数（e）{
如果（！$（'#叠加'）。长度）{
$（'body'）。追加（''）；
$（“#内容”）.css（{opacity:“0”}）；
}
}).keyup（功能（e）{
如果（e.which==27）{
$（“#覆盖”）.remove（）；
$（'content'）.css（{'opacity'：'1'}）；
}
}).blur（函数（e）{
$（“#覆盖”）.remove（）；
$（'content'）.css（{'opacity'：'1'}）；
});
$（'body'）。单击（函数（e）{
如果（！$（e.target）.is（“#联系”））{
$（“#覆盖”）.remove（）；
$（'content'）.css（{'opacity'：'0'}）；
}
})

您可以使用
$（'h1，p，buton'）.show（）优化真正的MVP@Milancheda感谢您的优化！谢谢你的解决方案！我已经选择了答案，但我给了你声誉！