how to make overlay like youtube

Question

I am having a simple web page with a navigation bar. When is toggle my navigation bar I want the rest of area in my page to be overlay live Youtube(A sample image is attached below). But after trying 100 time the result is attached below(A sample image is attached below).The problem is it's not overlaying the element which has defined color attribute.

My css code to achieve overlay:

.overlay{
        width: 100%;
        position: fixed !fixed;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0,0.5) !important;
        z-index:0;
        cursor: pointer;
   }

Answer 1

The below example just plays with visibility and opacity of overlay wrapper.

$("#click").on("click", function(){
    $(".orientation-check-wrapper").toggleClass('show-overlay');
});

.orientation-check-wrapper {
    height: 100vh;
    position: fixed;
    width: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 99;
    top: 0;
    opacity:0;
    transition: .4s all;
    opacity: 0;
    visibility: hidden;
}
.orientation-check-text {
    top: 100px;
    right: 0;
    left: 0;
    bottom:0;
    position: absolute;
    margin: 0 auto;
    width: 390px;
    height: 18px;
    background: #fff;
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 0 10px #3493c1;
    font-size: 13px;
    color: #000;
    text-align:center;
    font-family: sans-serif;
}

.show-overlay{
    opacity: 1;
    visibility: visible;
}

#click{
  z-index: 999;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="click" id="click" />

<div class="orientation-check-wrapper">
    	<div class="orientation-check-text">This application is best supported on resolutions above 800px</div>
    </div>

Answer 2

I have updated a post with some code which may probably very helpful to simulate YouTube like overlay.

$(document).ready(function() {
  $(".overlay, .close").hide();
  $("#btnClickme").bind("click", function() {
    $(".overlay, .close").fadeIn();
    $(".wrapper-btn").fadeOut();
  });
  $(".btnClose").bind("click", function() {
    $(".overlay, .close").fadeOut();
    $(".close").unbind("click");
    $(".wrapper-btn").fadeIn();
  });
});

* {
  font-family: 'arial';
  font-size: 12px;
}

.close a {
  color: #ffffff;
  right: 0px;
  top: 0px;
  font-size: 10px;
  position: relative;
  z-index: 1;
  display: block;
  text-decoration:none;
  font-size:13px;
}

.close {
  position: absolute;
}

.overlay-wrapper {
  float: left;
  width: 200px;
  height: 200px;
  position: absolute;
  padding: 10px;
}

.wrapper-row {
  float: left;
}

.overlay {
  float: left;
  position: relative;
  background-color: #000000;
  width: 200px;
  height: 200px;
  margin: 10px;
  opacity: 0.5;
  filter: alpha(opacity=50);
  /* For IE 8 & 9 (more valid) */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='overlay-wrapper'>
  <div class="wrapper-row">
    <img src="http://via.placeholder.com/200x200" />
  </div>
  <div class="wrapper-row wrapper-btn">
    <input type="button" id="btnClickme" name="btnClickme" value="click here" />
  </div>
  <div class="close">
    <a href="javascript:void(0);" class="btnClose">
    (close)
    </a>
  </div>
</div>

<div class="overlay"></div>

Answer 3

I would like to add the possibility of usage of css filters in this case, as a side technique.

They are now widely available into many browsers, we can with them do pretty nice stuffs, without adding an overlay.

Here on this simple example, the blur filter is used. The filter is added by javascript alone. This way, there is no need to modify the html or the css. It can be useful.

I took the html from the top answer, which is the good regular way to do this.

document.getElementsByClassName("content")[0].setAttribute("onclick","this.style.filter='blur(2px)'")

<div class="overlay">Some text
</div>

<div class="content">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea velit provident sint aliquid eos omnis aperiam officia architecto error incidunt nemo obcaecati adipisci doloremque dicta neque placeat natus beatae cupiditate minima ipsam quaerat explicabo non reiciendis qui sit.</div>
    <input type="text">
    <button class="btn btn-success">Submit</button>
</div>

The list of css filters:

filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

Further infos: https://developer.mozilla.org/en-US/docs/Web/CSS/filter

Answer 4

You need to add an higher z-index and a grey background overlay.

$(".btn").click(function () {
    $(".overlay").show();
});

    .overlay {
     background-color: rgba(128, 128, 128, 0.40);
      position: fixed;
      width: 100%;
      height: 100%;
      z-index: 99999;
      display: none;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="overlay">
</div>

<div class="content">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea velit provident sint aliquid eos omnis aperiam officia architecto error incidunt nemo obcaecati adipisci doloremque dicta neque placeat natus beatae cupiditate minima ipsam quaerat explicabo non reiciendis qui sit.</div>
    <input type="text">
    <button class="btn btn-success">Submit</button>
</div>

Answer 5

Assuming that you have a structure like this

<aside class="sidebar">
   <!-- Stuff-->
</aside>
<section class="content">
    <!-- More stuff -->
</section>

and an open class is added to sidebar when the bar is opened, you can use the adjacent sibling combinator to get the overlay

.sidebar.open + .content:before {
    width: 100%;
    position: fixed !fixed;
    display: block;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5) !important;
    z-index:0;
    cursor: pointer;
}