CSS 화면 어둡게 오버레이

by JM note

HTML

<style>
html {
  height: 150%;
  background: linear-gradient(red, yellow, green);
}

.overlay {
  display: none;
  z-index: 1000;
  position: fixed;
  width: 100%; height: 100%;
  left: 0; top: 0;
  background-color: rgba(0,0,0, 0.4);
  overflow-x: hidden;
}
</style>

<div class="overlay"></div>
<button id="btn-dark">어둡게</button>

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$(function() {
  $("#btn-dark").click(function() {
    $(".overlay").show();
  });
});
</script>