Could someone please assist me in creating a popup div that appears from bottom to top when a specific button is clicked? I would like the div to be fixed without affecting the overall page content. Any help would be greatly appreciated. Thank you!
$('#sec-menu').click(function() {
$('.sec-menu-div').toggleClass("active");
});.sec-menu {
position: fixed;
z-index: 777;
width: auto;
height: auto;
bottom: 0;
background-color: chartreuse;
left: 50%;
transform: translateX(-50%);
}
.sec-menu button {
padding: 5px 50px;
}
.sec-menu-div {
display: flex;
justify-content: center;
position: absolute;
align-items: center;
width: 50%;
height: auto;
padding: 20px;
font-size: 20px;
z-index: 777;
color: white;
background-color: darkgoldenrod;
border-radius: 5px;
transition: all 0.4s ease;
transform: translateX(1000%);
}
.sec-menu-div.active {
bottom: 29px;
z-index: 777;
position: fixed;
width: 100%;
left: 50%;
transform: translateX(-50%);
transition: all 0.4s ease;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sec-menu">
<button id="sec-menu">Menu</button>
<div class="sec-menu-div">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente, eligendi.</p>
</div>
</div>