How to display Modal at the bottom and make the background blurred?

edit

To display a modal at the bottom and make the background blurred, you can use the following CSS and JavaScript:

CSS:

.modal { position: fixed; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 9999; background-color: rgba(0, 0, 0, 0.6); filter: blur(5px); display: flex; align-items: flex-end; justify-content: center; }

.modal-content { width: 80%; max-width: 600px; margin-bottom: 50px; }

JavaScript:

// Get modal element var modal = document.getElementById('myModal');

// Get close button var closeBtn = document.getElementsByClassName('close')[0];

// Listen for close click closeBtn.addEventListener('click', closeModal);

// Listen for outside click on modal window.addEventListener('click', outsideClick);

// Function to open modal function openModal() { modal.style.display = 'block'; }

// Function to close modal function closeModal() { modal.style.display = 'none'; }

// Function to close modal if outside click function outsideClick(e) { if (e.target == modal) { modal.style.display = 'none'; } }

You can then use the following HTML to create your modal:

Note: This code assumes that you have a button or other element that triggers the modal to open, and that it has an onclick function that calls the openModal() function.