弹出窗口从底部溢出其他 div 块

Question

我正在尝试在单击链接时向上滑动弹出窗口。 我在LINK 下准备了一个包含弹出窗口周围元素的示例

有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>

如您所见，在它们之间有我隐藏的弹出窗口，我想在页脚块上方显示它。在页脚区域中按下链接时，弹出窗口应缓慢向上滑动到页脚上方，溢出页脚上方的块。我的弹出窗口应该具有动态高度，因为用户选择了不同的语言内容。对不起我的英语，希望有人可以帮助我。我在这里找到了一个示例 LINK 这应该如何工作（除了客户端按钮是我的页脚，我只能弹出带有绝对位置或 z-index 的弹出窗口，所以我不能真正使用这个示例）。

其余代码： CSS：

#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;
}

JS：

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

Answer 1

有很多方法可以实现这一点。我所做的是将您的footer 和popup 元素包装在一个包装div 下。这有助于相对于彼此放置和动画它们的位置。我还将整个盒子包裹在一个 div 中，并将其命名为 box。

footer-container 的高度等于和 footer 元素。当您单击按钮时，将应用带有元素高度值的bottom，并且由于popup 是绝对定位的，它会向上动画。

删除bottom: 60px 会再次隐藏该元素。

此实现还允许popup 元素的动态高度。

Fiddle

 $('#FooterLink').click(function() {
   $('#Popup').animate({
     top: -$("#Popup").height()
   });
 });
 $('#close').click(function() {
   $('#Popup').animate({
     top: 0
   });
 });

#test {
  display: inline-block;
}
#block {
  height: 150px;
  color: #FFF;
  background-color: #505050;
  text-align: center;
}
#Popup {
  position: absolute;
  z-index: 0;
  background-color: red;
  width: 100%;
  min-height: 60px;
}
#close {
  width: 20px;
  margin-left: 100px;
  cursor: pointer;
}
#footer-container {
  position: relative;
  height: 60px;
}
#footer {
  position: relative;
  z-index: 100;
  height: 60px;
  background-color: blue;
  color: white;
  text-align: center;
}
#FooterLink {
  cursor: pointer;
}
#box {
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="block">
  Some content inside the block.
</div>
<div id="footer-container">
  <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>
</div>

Answer 2

您只需将 css #Popup 位置更改为 relative

试试这个解决方案

 $('#FooterLink').click(function () {
    $('#Popup').show(2000);
 });
 $('#close').click(function () {
    $('#Popup').hide(2000);
 });

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

#Popup {
  display: none;
  position:relative; 
  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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>