To create a popup modal that appears from the bottom and blurs the background, you can use the following steps:
<div class="modal-container">
<!-- Modal Content here -->
</div>
.modal-container {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 0;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
transition: height 0.3s ease-in-out;
}
This sets the position of the container div at the bottom of the page, sets the height to 0 to hide it initially, and applies a background color with opacity to create the blur effect. We also set the z-index to 999 to ensure it appears on top of other elements and add a transition effect for a smooth animation.
<button id="modal-btn">Open Modal</button>
.modal-container.active {
height: 100%;
}
This sets the height to 100% to reveal the content of the modal.
var modalBtn = document.getElementById('modal-btn');
var modalContainer = document.querySelector('.modal-container');
modalBtn.addEventListener('click', function() {
modalContainer.classList.add('active');
});
This will add the 'active' class to the container when the button is clicked, revealing the modal content with a blur effect.
You can customize the CSS and JavaScript to fit your specific needs, but this should give you a good starting point for creating a popup modal that appears from the bottom and blurs the background.
Asked: 2022-01-14 11:00:00 +0000
Seen: 11 times
Last updated: Jan 06 '23