Javascript 从底部向上弹出幻灯片，溢出其他div块

我试图在点击链接时弹出幻灯片。 我已经准备了一个例子，在下面的弹出窗口中有一些元素

有2个块（块和页脚}：

<div id="block">
  Some content inside the block.
</div>

<div id="Popup">
  <div class="Container">
    <div id="tmp"> Popup!
      <span id="close">X</span>
    </div>
  </div>
</div>

<div id="footer">
  <span id="FooterLink">Link</span>
</div>

JS:

---

您只需将css

#弹出式

位置更改为

相对

试试这个解决方案

$（'#FooterLink'）。单击（函数（）{
$（'Popup'）。show（2000年）；
});
$（“#关闭”）。单击（函数（）{
$（'弹出'）.hide（2000）；
})；

#块{
高度：150像素；
颜色：#FFF；
背景色：#505050；
文本对齐：居中；
}
#弹出窗口{
显示：无；
位置：相对位置；
z指数：100；
背景色：红色；
宽度：100%；
最小高度：60px；
}
#接近{
宽度：20px；
左边距：100px；
光标：指针；
}
#页脚{
高度：50px；
背景颜色：蓝色；
颜色：白色；
文本对齐：居中；
}
#页脚链接{
光标：指针；
}

块中的一些内容。
弹出窗口！
X
链接

有很多方法可以实现这一点。我所做的是将

页脚

和

弹出

元素包装在一个包装

div

下。这有助于放置它们的相对位置并设置它们的动画。我还将整个框包装在一个div中，并将其命名为

box

页脚容器

的高度等于和

页脚

元素的高度。当您单击按钮时，将应用具有元素高度值的

底部

，并且由于

弹出窗口

处于绝对位置，因此它将向上设置动画

移除

bottom:60px

会再次隐藏该元素

此实现还允许

弹出窗口

元素的动态高度

$（'#FooterLink'）。单击（函数（）{
$（“#弹出窗口”）。设置动画({
顶部：-$（“#弹出”）高度（）
});
});
$（“#关闭”）。单击（函数（）{
$（“#弹出窗口”）。设置动画({
排名：0
});
})；

#测试{
显示：内联块；
}
#挡块{
高度：150像素；
颜色：#FFF；
背景色：#505050；
文本对齐：居中；
}
#弹出窗口{
位置：绝对位置；
z指数：0；
背景色：红色；
宽度：100%；
最小高度：60px；
}
#接近{
宽度：20px；
左边距：100px；
光标：指针；
}
#页脚容器{
位置：相对位置；
高度：60px；
}
#页脚{
位置：相对位置；
z指数：100；
高度：60px；
背景颜色：蓝色；
颜色：白色；
文本对齐：居中；
}
#页脚链接{
光标：指针；
}
#盒子{
溢出：隐藏；
}

块中的一些内容。
弹出窗口！
X
链接

您是否正在寻找类似于此的thx，但没有。它应该出现在蓝色区域（页脚上方）上方。请参阅我的完整答案。谢谢，这正是我所期望的。我将您的解决方案应用到了我的真实代码中，并且它似乎工作正常：）太好了！很高兴我能帮上忙。我发现这个解决方案有一点不太好，我无法解决。我刚刚在css样式中为

#Popup{min height:160px}

更改了两个内容，因此它比页脚容器和

#block{height:900px}

更大。这里是代码，但不可能测试它。问题是当我尝试像

http://myweb.com/index.php#footer

或页面上的任何其他位置，弹出窗口显示在页脚后面和部分下方（无需单击链接）。我希望你仍能在这方面提供帮助。你能链接到你的项目或显示这一点的小提琴吗？如果我不能测试它，我就帮不上忙了。这是我要做的链接。我在它的顶部添加了一个链接“转到页脚”，这个坏的效果与通过域和散列传递的效果相同。希望你能帮忙修理。

#block {
  height: 150px;
  color: #FFF;
  background-color: #505050;
  text-align: center;
}

#Popup {
  display: none;
  position:absolute; 
  z-index: 100; 
  background-color: red; 
  width: 100%;
  min-height: 60px;
}
#close {
  width: 20px;
  margin-left: 100px;
  cursor: pointer;
}


#footer {
  height: 50px;
  background-color: blue;
  color: white;
  text-align: center;
}
#FooterLink {
  cursor: pointer;
}

 $('#FooterLink').click(function () {
    $('#Popup').slideToggle();
 });
 $('#close').click(function () {
    $('#Popup').slideToggle();
 });