How to blur NodeBB on modal

[phenomlab]

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 bootbox library 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-loggedin class too

The CSS itself is surprisingly simple

.modal-open #panel {
    filter: blur(5px);
}

Note that the blur value 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 #panel with #content.

.modal-open #content{
    filter: blur(5px);
}

Enjoy !

[DownPW]

Very good effect
Thanks for the tip Mark !

[DownPW]

@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]

@DownPW potentially, yes. Depends on the condition required I suppose.