为网站创建透明的演示屏幕

Question

我有一个网站，我正在添加新的功能，强制性的是，它对用户非常重要，用户应该收到关于页面上添加的新按钮的通知，而且非常干净。

所以，我看了谷歌并找到了chardin.js解决方案之一。但

我希望页面如下所示

还有更多解决方案吗？如果有人看过Flipkart解决方案，那么我会喜欢它的应用。

Answer 1

执行此操作的一种方法是<div> position: fixed;，opacity: 0.5;和z-index: 10。

可以使用<p>以position: relative;的形式将文本添加到此文本中。图像也是如此（<img>）。

使用Javascript，点击/点击后即可隐藏此<div>。

你真的不需要一个插件。把事情简单化 ：）

<小时/> 这是一个有效的演示：

（以全页模式查看。）

document.getElementById("overlay").addEventListener("click", function(){
  this.style.display = "none";
});

*{
  margin: 0px;
  padding: 0px;
}

#overlay{
  font-family: "Comic Sans MS", cursive, sans-serif;
  position: fixed;
  width: 100%;
  height: 100%;
  background: lightgray;
  opacity: 0.5;
  z-index: 10;
}

#circle1{
  position: relative;
  display: inline-block;
  border: 3px solid red;
  border-radius: 50%;
  width: 200px;
  height: 100px;
  left: 30px;
}

#overlay p, #overlay img{
  position: relative;
}

#overlay p{
  color: blue;
}

#instruction1{
  top: 50px;
  left: 400px;
}

#arrow1{
  width: 100px;
  position: relative;
  top: 100px;
  left: 150px;
}

#instruction2{
  top: 100px;
  left: 225px;
}

#dismiss{
  font-size: 12px;
}

main{
  z-index: 0;
}

main div{
  padding: 50px;
  background: yellow;
}

<div id="overlay">
  <div id="circle1"></div>
  <p id="instruction1">This is some instruction.<br/>
    <span id="dismiss">(tap to dismiss)</span>
  </p>
  <img id="arrow1" src="http://pixabay.com/static/uploads/photo/2013/07/13/10/13/arrow-156792_640.png" />
  <p id="instruction2">This is something cool!</p>
</div>

<main>
  <div>This is my main content.</div>
</main>