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

即可

试试这个解决方案

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: