How do I create a popup model that appears from the bottom and blurs the background?

edit

To create a popup modal that appears from the bottom and blurs the background, you can use the following steps:

1. Create a container div that will hold the modal content and place it at the bottom of the page.

<div class="modal-container">
  <!-- Modal Content here -->
</div>

1. Apply the following CSS to the container div to position it at the bottom and hide it initially:

.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.

1. Add a button or link to trigger the modal:

<button id="modal-btn">Open Modal</button>

1. Create a CSS class to add to the container when the button is clicked:

.modal-container.active {
  height: 100%;
}

This sets the height to 100% to reveal the content of the modal.

1. Add JavaScript to listen for the button click event and add the 'active' class to the container:

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.