Menu
I'm trying to make a modal window in react with a blured backdrop. What I'm trying to achieve is to blur the backdrop content and Not bluring the background image since there's no image just the content behind the modal window. So far I've come across these solutions frosting glass, frosting glass and glass effect but all of them use background image to apply the blur effect but that's not what I'm looking for.
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;
}
when I add background image to the .modal-container::before it works but with background color it doesn't!
Any help is appreciated, thanks.
966
there you go. just see the result. in fact i suggesting to keep the modal next to the contents that you want to be blurred instead of keep it inside the contents.
body, html {
height: 100%;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
* {
box-sizing: border-box;
}
.bg-image {
filter: blur(8px);
-webkit-filter: blur(8px);
width: 100%;
height: 100%;
}
.bg-text {
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
color: white;
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 80%;
padding: 20px;
text-align: center;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="bg-image">
asdaidnasijbadkjhvbafvjhabdf vkjhabdfvk ahjbdfkv hjbfdkv s
</div>
<div class="bg-text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam sit dolores nam tempore dolore dicta quae fugiat assumenda, obcaecati, quibusdam. Officiis autem perspiciatis pariatur, beatae possimus, nulla nobis adipisci ipsum.</p>
</div>
</body>
</html>Add
filter: blur(1px);
Increasing the blur px will increase the blurriness of the background.
Fiddle here
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
