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

• 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

2 Answers 2

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>