Development

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.

blurred.png

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 !

Another resource I’m using pretty much full time is the CSS3 Gradient Generator below. It’s extremely useful, and provides a very quick method to generate gradients when required. Both powerful and easy to use, it should be in every web developer’s arsenal

https://cssgradient.io/

Found this nifty little resource whilst developing the “light” theme for this site. Very handy way of creating matching colour sets quickly, and in fact, it was the tool I used to generate the progress bar in the “light” theme…

https://colorate.azurewebsites.net/