使用javascript激活css弹出窗口

您好，我有这个CSS弹出窗口，目前是一个按钮设置。我还有一个JavaScript“鼠标点击计数器”。我希望发生的是当计数器归零时弹出窗口出现。我认为这很容易，因为我没有足够的JavaScript经验。谢谢

CSS弹出窗口

.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #06D85F;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}

@media screen and (max-width: 700px){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
}

JavaScript鼠标点击计数器（从10开始，然后从10开始）

我倾向于不澄清事情，所以只是为了确定。一旦计数器降到零，我想弹出窗口激活所有功能。包括屏幕不透明。谢谢大家!

jsfiddle-鼠标单击计数器

jsfiddle-弹出窗口

---

这里有一种方法可以检查

number

的值，如果

number>-1

，则单击

，如果
number==0
，则更新散列以显示弹出窗口


var数=10；
document.onclick=函数（）{
数字--；
如果（编号>-1）{
document.getElementById（“clicks”）.innerHTML=number；
（number==0）和&（location.hash='#popup1'）
}
};
.overlay{
位置：固定；
排名：0；
底部：0；
左：0；
右：0；
背景：rgba（0,0,0,0.7）；
过渡：不透明度500ms；
可见性：隐藏；
不透明度：0；
}
.覆盖：目标{
能见度：可见；
不透明度：1；
}
.弹出窗口{
利润率：70像素自动；
填充：20px；
背景：#fff；
边界半径：5px；
宽度：30%；
位置：相对位置；
过渡：所有5s易于输入输出；
}
.弹出窗口h2{
边际上限：0；
颜色：#333；
字体系列：Tahoma，Arial，无衬线；
}
.弹出.关闭{
位置：绝对位置；
顶部：20px；
右：30px；
过渡：所有200ms；
字体大小：30px；
字体大小：粗体；
文字装饰：无；
颜色：#333；
}
.弹出.关闭：悬停{
颜色：#06D85F；
}
.popup.content{
最高高度：30%；
溢出：自动；
}
@媒体屏幕和屏幕（最大宽度：700px）{
.盒子{
宽度：70%；
}
.弹出窗口{
宽度：70%；
}
}

哇！
让我们看看你是怎么做的！！
您能否创建一个JSFIDLE pleaseHmm它似乎不起作用。这可能是我这边的事。在这里，我把html放在了实际弹出窗口中。这是什么哇！让我们看看你是怎么做的！！一旦它归零，它就停留在那里。弹出窗口不会…嗯“弹出窗口”@MichaelCoker@SethChouinard啊，你在帖子中添加了弹出代码。没有这些，我不得不假设你在做什么，所以我写下了我认为你弹出窗口是什么的最佳猜测，你无法将我的演示改编回你的代码。将来，请确保预先包含所有相关代码。用你的弹出代码更新了我的答案。用Firefox53和Chrome58测试了上面的示例，两者都有效。
var number = 10;

            document.onclick = function(){
                    number --;
                    document.getElementById("clicks").innerHTML = number;
            }