Background blur

Hey I want to create something like a bootstrap modal where if you click on a button an element will be shown in the foreground and everything in the background will be blurred. Is there a way to do that

onClick – show %widgetname% – treat as lightbox
Background will not be blurred, but you can make it darker\lighter.

Hi!

You can do this with some javascript. (Javascript can be added via the Open Link in Current Window command.) Here, the code that turns blur on is in OnShow of the popup, and the code that turns off the blur is in OnHide.

Note: in order to blur something, you have to be able to refer to it in the javascript. Here I put everything that I want blurred into a dynamic panel called “myBackground”.

Blur:

$('[data-label="myBackground"]').css({'filter': 'blur(5px)', '-webkit-filter': 'blur(5px)'})

Unblur:

$('[data-label="myBackground"]').css({'filter': '', '-webkit-filter': ''})

If you want to blur multiple things at once (e.g., panels or other widgets named “thing1” and “thing2”), you would use multiple selectors:

$('[data-label="thing1"], [data-label="thing2"]').css({'filter': 'blur(5px)', '-webkit-filter': 'blur(5px)'})

The popup is shown “as lightbox” with a transparent lightbox background. You can play with the blur amount by changing 5px to a higher or lower value.

Live sample

File: blurbackground.rp (130.3 KB)

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.