I am currently working on creating a modal window in React with a blurred backdrop. My goal is to blur the backdrop content while keeping the background image clear, as there is no image behind the modal window, just content. I have explored various solutions such as frosting glass, frosting glass, and glass effect. However, all of them involve using a background image to achieve the blur effect, which is not what I want.
Here is the React component:
import React from "react";
import './index.scss';
const Modal = ({ handleClose, show, children }) => {
return (
<div class="modal display-block">
<div class="modal-container">
<section class="modal-main">
<div class="row no-gutters header">
<div class="col">
<i class="fa fa-lg fa-close"></i>
</div>
</div>
<div class="row no-gutters content"></div>
</section>
</div>
</div>
);
};
export default Modal;
CSS:
@import 'yelStrap/_variables.scss';
.modal {
position: fixed;
top: 0;
left: 0;
width:100%;
height: 100%;
}
.modal-container {
background: inherit;
position: absolute;
top: 50px;
right: 250px;
left: 0;
bottom: 0;
overflow: hidden;
}
.modal-container::before{
content: '';
width: 100% ;
height: 100%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.5);
filter: blur(6px);
-webkit-filter: blur(6px);
-moz-filter: blur(6px);
-o-filter: blur(6px);
-ms-filter: blur(6px);
}
.modal-main {
position: relative;
background: white;
width: 90%;
min-height: 352px;
top: 10%;
left: 0px;
right: calc(10% / 2);
padding: 10px;
background-color: $white;
border-radius: 5px;
box-shadow: 0 0 12px 2px rgba(20, 150, 255, 0.15);
z-index: $zindex-modal;
}
.fa-close {
color: $water-disabled;
cursor: pointer;
}
.display-block {
display: block;
}
.display-none {
display: none;
}
Adding a background image to the .modal-container::before works, but with a background color it does not!
Any assistance would be greatly appreciated, thank you.