javascript - Popup slide up from the bottom overflowing other div blocks - Stack Overflow

admin管理员组

文章数量:1401824

I'm trying to make a popup slide up when clicking on the link. I've prepared an example with elements around the popup under this LINK

There are 2 blocks (block and footer}:

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

Between them as you can see there is my hidden popup, which I would like to show just above the footer block. When pressing a link in in the footer area, the popup should slowly slide up above the footer overflowing the block above the footer. My popup should have dynamic height because of different content inside depending of a language is chosen by the user. Sorry for my english, hopefully someone can help me with this. I found an example here LINK how should this work (except the clients button is my footer and I can have only popup with absolute position or z-index so I can't really use this example).

The rest of the code: 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();
 });

I'm trying to make a popup slide up when clicking on the link. I've prepared an example with elements around the popup under this LINK

There are 2 blocks (block and footer}:

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

Between them as you can see there is my hidden popup, which I would like to show just above the footer block. When pressing a link in in the footer area, the popup should slowly slide up above the footer overflowing the block above the footer. My popup should have dynamic height because of different content inside depending of a language is chosen by the user. Sorry for my english, hopefully someone can help me with this. I found an example here LINK how should this work (except the clients button is my footer and I can have only popup with absolute position or z-index so I can't really use this example).

The rest of the code: 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();
 });

• javascript
• jquery
• css
• animation

Share Improve this question Follow edited May 11, 2016 at 8:47 Chris 59.6k2020 gold badges120120 silver badges142142 bronze badges asked May 11, 2016 at 8:09 soonicsoonic 61511 gold badge1010 silver badges2222 bronze badges 3

• are you looking for something like this jsfiddle/jitendratiwari/12nnzmz9/1 – Jitendra Tiwari Commented May 11, 2016 at 8:13
• thx, but no. It should e up above the blue area (above footer). – soonic Commented May 11, 2016 at 8:15
• see my plete answer. – Jitendra Tiwari Commented May 11, 2016 at 8:21

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

There's many ways you could acplish this. What I did was to wrap your footer and popup elements under one wrapping div. This helps in placing and animating their positions in relation to each other. I also wrapped the entire box in one div and called it box.

The footer-container is given a height equal to the and footer element. When you click on the button, bottom with the value of the element's height is applied and since the popup is positioned absolutely, it will animate upwards.

Removing bottom: 60px hides the element again.

This implementation allows for a dynamic height of the popup element as well.

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

You simple need to change you css #Popup position to relative

Try this solution

 $('#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./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>

本文标签： javascriptPopup slide up from the bottom overflowing other div blocksStack Overflow