<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="http://code.jquery.com/jquery-3.6.0.js"></script>> <style type="text/css" media="screen">
#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;
}
</style>
</head>
<body>
<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>
<script type="text/javascript">
$('#FooterLink').click(function() {
$('#Popup').animate({
top: -$("#Popup").height()
});
});
$('#close').click(function() {
$('#Popup').animate({
top: 0
});
});
</script>
</body>
</html>
