Popup slide up from the bottom overflowing other div blocks
<p>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 <a href="https://jsfiddle.net/12nnzmz9/" rel="nofollow">LINK</a></p>

<p>There are 2 blocks (block and footer}:</p>

<pre><code>&lt;div id="block"&gt;
  Some content inside the block.
&lt;/div&gt;

&lt;div id="Popup"&gt;
  &lt;div class="Container"&gt;
    &lt;div id="tmp"&gt; Popup!
      &lt;span id="close"&gt;X&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div id="footer"&gt;
  &lt;span id="FooterLink"&gt;Link&lt;/span&gt;
&lt;/div&gt;
</code></pre>

<p>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 <a href="http://jsfiddle.net/j08691/8LXY6/" rel="nofollow">LINK</a> 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).</p>

<p>The rest of the code:
CSS:</p>

<pre><code>#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;
}
</code></pre>

<p>JS:</p>

<pre><code> $('#FooterLink').click(function () {
    $('#Popup').slideToggle();
 });
 $('#close').click(function () {
    $('#Popup').slideToggle();
 });
</code></pre>