How to blur NodeBB on modal
-
I spent most of the afternoon (yes, I know) trying to track down a way to blur the background window containing data in the event that the modal was fired. I thought about using jQuery initially to complete this, but then that would add another layer of complexity, which could easily break, or fire at the wrong time, which is never a good idea.
After a bit of head scratching and soul searching, it seems this is possible with the
bootboxlibrary and a small element of CSS.
The result is pleasing to the eye, and looks professional in the sense that you want the user to focus on the modal request rather than the content on the screen. This technique is typical of paywalls, or as a very convenient way of making a web page unreadable to passing users, but still crawlable via Google.
It could be used in conjunction with the
.user-loggedinclass too
The CSS itself is surprisingly simple
.modal-open #panel { filter: blur(5px); } Note that the
blurvalue can be increased or decreased according to taste. The lower the blur, the more “legible” the background becomes. If you want to cover the entire screen apart from the modal and the component it references, then use#panel. If you prefer the navbar to still be visible (but not clickable) then you can replace#panelwith#content..modal-open #content{ filter: blur(5px); } Enjoy !
-
Very good effect
Thanks for the tip Mark ! -
I spent most of the afternoon (yes, I know) trying to track down a way to blur the background window containing data in the event that the modal was fired. I thought about using jQuery initially to complete this, but then that would add another layer of complexity, which could easily break, or fire at the wrong time, which is never a good idea.
After a bit of head scratching and soul searching, it seems this is possible with the
bootboxlibrary and a small element of CSS.The result is pleasing to the eye, and looks professional in the sense that you want the user to focus on the modal request rather than the content on the screen. This technique is typical of paywalls, or as a very convenient way of making a web page unreadable to passing users, but still crawlable via Google.
It could be used in conjunction with the
.user-loggedinclass tooThe CSS itself is surprisingly simple
.modal-open #panel { filter: blur(5px); }Note that the
blurvalue can be increased or decreased according to taste. The lower the blur, the more “legible” the background becomes. If you want to cover the entire screen apart from the modal and the component it references, then use#panel. If you prefer the navbar to still be visible (but not clickable) then you can replace#panelwith#content..modal-open #content{ filter: blur(5px); }Enjoy !
@phenomlab said in How to blur NodeBB on modal:
It could be used in conjunction with the .user-loggedin class too
For login page user ?
-
@phenomlab said in How to blur NodeBB on modal:
It could be used in conjunction with the .user-loggedin class too
For login page user ?
@DownPW potentially, yes. Depends on the condition required I suppose.
Hello! It looks like you're interested in this conversation, but you don't have an account yet.
Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (ether email, or push notification). You'll also be able to save bookmarks, use reactions, and upvote to show your appreciation to other community members.
With your input, this post could be even better 💗
RegisterLog in
