Php 如何在具有透明背景的网站上创建可关闭的div？

我期待着使一个div浮动在一个现有的网站顶部，我希望该网站有一个黑色的磨砂顶部与20%不透明的div在100%不透明

我仅限于在这个阶段使用html和css

我现在的代码是

.popup{
利润率：75px自动；
填充：20px；
背景：#fff；
宽度：500px；
盒影：0.50pxRGBA（0,0,0,0.3）；
位置：相对位置；
}

标题
内容

这是更新后的纯css弹出窗口

.overlay{
位置：固定；
排名：0；
底部：0；
左：0；
右：0；
背景：rgba（0,0,0,0.7）；
过渡：不透明度500ms；
可见性：隐藏；
不透明度：0；
}
.覆盖：目标{
能见度：可见；
不透明度：1；
}
.弹出窗口{
利润率：70像素自动；
填充：20px；
背景：#fff；
边界半径：5px；
宽度：30%；
位置：相对位置；
过渡：所有2个易于输入输出；
}
.弹出.关闭{
位置：绝对位置；
顶部：20px；
右：30px；
过渡：所有200ms；
字体大小：30px；
字体大小：粗体；
文字装饰：无；
颜色：#333；
}
.popup.content{
最高高度：30%；
溢出：自动；
}

标题

内容

这是更新后的纯css弹出窗口

.overlay{
位置：固定；
排名：0；
底部：0；
左：0；
右：0；
背景：rgba（0,0,0,0.7）；
过渡：不透明度500ms；
可见性：隐藏；
不透明度：0；
}
.覆盖：目标{
能见度：可见；
不透明度：1；
}
.弹出窗口{
利润率：70像素自动；
填充：20px；
背景：#fff；
边界半径：5px；
宽度：30%；
位置：相对位置；
过渡：所有2个易于输入输出；
}
.弹出.关闭{
位置：绝对位置；
顶部：20px；
右：30px；
过渡：所有200ms；
字体大小：30px；
字体大小：粗体；
文字装饰：无；
颜色：#333；
}
.popup.content{
最高高度：30%；
溢出：自动；
}

标题

内容

谢谢@Vikas Jadhav，这正是我想要的。但是，我希望弹出窗口可以直接看到，而不是由超链接触发。为了确保这一点，我需要对代码做什么修改？你需要jquery或JavaScript来实现这一点。在窗口加载时显示弹出窗口我没有能力做到这一点。该网站是由一名开发人员创建的，他创建了一个自定义控制台等，并仅使用php和css进行了整个构建。我可能不得不在主页上以div的形式通过我的客户。不幸的是，对于当前的代码，我让它与页面一起滚动，并且不会使背景变暗。如果我们不能关上窗户，她不会介意的，但它确实需要在装载时可见。谢谢@Vikas Jadhav，这正是我想要的。但是，我希望弹出窗口可以直接看到，而不是由超链接触发。为了确保这一点，我需要对代码做什么修改？你需要jquery或JavaScript来实现这一点。在窗口加载时显示弹出窗口我没有能力做到这一点。该网站是由一名开发人员创建的，他创建了一个自定义控制台等，并仅使用php和css进行了整个构建。我可能不得不在主页上以div的形式通过我的客户。不幸的是，对于当前的代码，我让它与页面一起滚动，并且不会使背景变暗。如果我们不能关上窗户，她不会介意，但它确实需要在装载时可见。