Javascript 如何修复怪异<；部门>；重叠行为？

我想在网站上弹出一个联系人。我添加了所有必要的代码。当我点击链接时，弹出窗口会很好地打开，但第一个窗口会移动背景，第二个窗口的高度不会100%，即使我在css中指定了它

@导入url（'https://fonts.googleapis.com/css?family=Lato:400,500');
* {
保证金：0；
}
身体{
字体系列：“Lato”，无衬线；
字号：500；
背景图像：url（'https://images.unsplash.com/photo-1527100673774-cce25eafaf7f?ixlib=rb-1.2.1&ixid=eyjhchbawqiojeymdd9&auto=format&fit=crop&w=1234&q=80’；
背景尺寸：适合100%；
背景位置：中心，顶部；
背景重复：无重复；
颜色：白色；
}
部分{
身高：100%；
}
h1{
边缘底部：7px；
}
氢{
字体大小：300；
边缘顶部：7px；
边缘底部：21px；
}
v中心{
保证金：0；
位置：绝对位置；
最高：50%；
-ms转换：translateY（-50%）；
转化：translateY（-50%）；
}
#英雄{
左边距：15px；
z指数：1；
}
#社会英雄{
左边距：15px；
浮动：左；
z指数：1；
}
.按钮{
字号：12号；
背景色：rgba（255，255，255，0.1）；
显示：内联块；
填充物：0.35em 1.2em；
边框：0.1米实心#FFFFFF；
保证金：0.3em 0.3em 0；
边界半径：0.3em；
框大小：边框框；
颜色：#FFFFFF；
文本对齐：居中；
过渡：均为0.2s；
}
.按钮：悬停{
颜色：#000000；
背景色：#FFFFFF；
}
人力资源{
边框：2倍纯白；
边界半径：5px；
}
/*弹出窗体-默认情况下隐藏*/
.表格弹出窗口{
显示：无；
z指数：2；
身高：100%；
}
.表格容器{
宽度：100%；
身高：100%；
填充：10px；
背景色：rgba（0,0,0,0.7）；
颜色：白色；
保证金：0；
}
.表单容器输入{
宽度：60%；
填充：15px；
边界：无；
背景：白色；
边界半径：0.3em；
边缘底部：14px；
}
.表单容器文本区域{
宽度：60%；
填充：15px；
边界：无；
背景：白色；
边界半径：0.3em；
边缘底部：14px；
高度：150像素；
}
.窗体容器.按钮{
背景色：rgba（0,0,0,0.1）；
显示：内联块；
填充物：0.35em 1.2em；
边框：0.1米纯白；
保证金：0.3em 0.3em 0；
边界半径：0.3em；
框大小：边框框；
颜色：白色；
文本对齐：居中；
过渡：均为0.2s；
}
.form容器。按钮：悬停{
颜色：#000000；
背景色：#FFFFFF；
}
/*设备配置*/
/*超小型设备（手机，600px及以下）*/
@仅介质屏幕和（最大宽度：600px）{
h1{
字号：41pt；
垫底：10px；
}
氢{
字号：13pt；
}
.按钮{
字号：13pt；
宽度：47%；
}
人力资源{
显示：无；
}
}
/*小型设备（肖像平板电脑和大型手机，600px及以上）*/
@仅介质屏幕和（最小宽度：600px）{
h1{
字号：43号；
}
氢{
字号：13pt；
}
.按钮{
字号：12号；
}
}
/*中型设备（横向平板电脑、768px及以上）*/
@仅介质屏幕和（最小宽度：768px）{
h1{
字号：45pt；
}
氢{
字号：13pt；
}
.按钮{
字号：12号；
}
}
/*大型设备（笔记本电脑/台式机、992px及以上）*/
@仅介质屏幕和（最小宽度：992px）{
h1{
字体大小：50磅；
}
氢{
字体大小：15磅；
}
.按钮{
字号：12号；
}
}
/*超大设备（大型笔记本电脑和台式电脑，1200像素及以上）*/
@仅介质屏幕和（最小宽度：1200px）{
h1{
字号：60pt；
}
氢{
字号：18pt；
}
.按钮{
字号：13pt；
}
}

丹尼尔W。
函数openForm（）{document.getElementById（“contact”）.style.display=“block”}函数closeForm（）{document.getElementById（“contact”）.style.display=“none”}
丹尼尔W。

只是一个来自汉诺威的古怪摄影师，有一些复古的偏好
消息
名字*




电子邮件*




主题*




消息*



提交

像这样吗

函数openForm（）{document.getElementById（“contact”）.style.display=“block”}函数closeForm（）{document.getElementById（“contact”）.style.display=“none”}

@导入url（'https://fonts.googleapis.com/css?family=Lato:400,500');
* {
保证金：0；
}
身体{
字体系列：“Lato”，无衬线；
字号：500；
背景图像：url（'https://images.unsplash.com/photo-1527100673774-cce25eafaf7f?ixlib=rb-1.2.1&ixid=eyjhchbawqiojeymdd9&auto=format&fit=crop&w=1234&q=80’；
背景尺寸：适合100%；
背景位置：中心，顶部；
背景重复：无重复；
颜色：白色；
}
部分{
身高：100%；
}
h1{
边缘底部：7px；
}
氢{
字体大小：300；
边缘顶部：7px；
边缘底部：21px；
}
v中心{
保证金：0；
位置：绝对位置；
最高：50%；
左：10px；
-ms转换：translateY（-50%）；
转化：translateY（-50%）；
}
#英雄{
左边距：15px；
z指数：1；
}
#社会英雄{
左边距：15px；
浮动：左；
z指数：1；
}
.按钮{
字号：12号；
背景色：rgba（255，255，255，0.1）；
显示：内联块；
填充物：0.35em 1.2em；
边框：0.1米实心#FFFFFF；
保证金：0.3em 0.3em 0；
边界半径：0.3em；
框大小：边框框；
颜色：#FFFFFF；
文本对齐：居中；
过渡：均为0.2s；
}
.按钮：悬停{
颜色：#000000；
背景色：#FFFFFF；
}
人力资源{
边框：2倍纯白；
边界半径：5px；
}
/*弹出窗体-默认情况下隐藏*/
.表格弹出窗口{
显示：无；
z指数：2；
位置：绝对位置；
宽度：100%；
最小高度：100vh；
最大宽度：100vw；
文本对齐：居中；
排名：0；
左：0；
}
.表格容器{
宽度：100%；
身高：100%；
最小高度：100vh；
填充：10px；