Last active
October 5, 2024 13:48
-
-
Save webprogramozo/9684826e469e5dc375e98f65559e1509 to your computer and use it in GitHub Desktop.
Bootstrap modal with blurry background (Bootstrap 3,4,5)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Compatible with Bootstrap 3 and 4 */ | |
| body.modal-open > :not(.modal) { | |
| -webkit-filter: blur(1px); | |
| -moz-filter: blur(1px); | |
| -o-filter: blur(1px); | |
| -ms-filter: blur(1px); | |
| filter: blur(1px); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Compatible with Bootstrap 5, thanks @imikh */ | |
| .modal { | |
| -webkit-backdrop-filter: blur(1px); | |
| backdrop-filter: blur(1px); | |
| } |
it's a good solution, but i have a case in which i'm using React-Bootstrap and I've used your solution but when the dialog opens and if there is an error occurred the dialog will be wiped away but the screen still blurry and i can't see the error because of the filter styles.
This is because when an error occured: The modal-open class is still on your BODY tag, you need to remove it by yourself.
Thank you!
Doesn't work in Bootstrap 5.3.
But this one works:
.modal {
-webkit-backdrop-filter: blur(1px);
backdrop-filter: blur(1px);
}
Doesn't work in Bootstrap 5.3. But this one works:
.modal { -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); }
Thanks @imikh for your contribution, gist updated.
Doesn't work in Bootstrap 5.3. But this one works:
.modal { -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); }
This is working in Bootstrap 5.3+! ✅✅✅
Great, thanks @imikh!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
it's a good solution, but i have a case in which i'm using React-Bootstrap and I've used your solution but when the dialog opens and if there is an error occurred the dialog will be wiped away but the screen still blurry and i can't see the error because of the filter styles.