如何制作像youtube一样的叠加层

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.

我有一个带导航栏的简单网页。当切换我的导航栏时,我希望页面中的其余区域覆盖实时Youtube(下面附有一个示例图像)。但是在尝试100次后,结果附在下面(下面附有一个样本图像)。问题是它没有覆盖已定义颜色属性的元素。

My css code to achieve overlay:

我的css代码实现叠加:

.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;
   }

5 个解决方案

#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>

#2

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

您需要添加更高的z-index和灰色背景叠加层。

$(".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>

#3

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

我想在这种情况下添加使用css过滤器的可能性,作为一种辅助技术。

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.

在这个简单的例子中,使用了模糊滤镜。过滤器仅通过javascript添加。这样,就不需要修改html或css了。它可能很有用。

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

我从顶部答案中获取了html,这是执行此操作的常规方法。

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:

css过滤器列表:

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

更多信息:https://developer.mozilla.org/en-US/docs/Web/CSS/filter

#4

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

我更新了一些帖子,其中包含一些代码,这些代码可能非常有助于像叠加一样模拟YouTube。

$(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>

#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;
}