PopUp background blur
Question
Application Type
Reactive

I'd like to blur the dark background when PopUp is visible, I managed to do this using Backdrop-filter in CSS but backdrop isn't working in some browsers as my IOS Safari. I took a look at iCloud page and they are using Filter for a DIV. But I can't find a way to do this in OutSystems since editions on the PopUp element is totally blocked as far as I know.

Solution

You need to go to this class and make the blur on the class content if you want just the content to be blurred. If you want everything you will need to change the main class, which is on the main container of the layout as content. Maybe you can do that using javascript.

But to avoid javascript, I am going to change the layout that I am using on my screen, you just need to follow the same instructions for your case.

Create this input on the layout that will say if you are with a popup open or not.

Then, inside of the container content, you are going to do an if-else to put the class that will say if a popup is open or not.


Dont forget to put the variable that says if a popup is active or not in the layout inputs.

This can be done using javascript, but for me, it's easier to show you how you can do it with this option.

PS: Dont forget to create the class at the modules' theme that I am giving to the layout when it's active

If you want everything to be blurred. Instead of putting at the content the class that will make the content be a blur. You can always go up to other parent classes and give that class, this way, the content, the header, everything will be blurred. But you will always to do the condition :)

I will give you an example.

Instead of the condition is on the content container it can go to the main container.

Let me know if this helps.

Check the OML and the link.

https://marcio-carvalho4.outsystemscloud.com/backgroundblur/Products?_ts=637827807445648264

Kind Regards,

Márcio

backgroundblur.oml

Worked like a champ!!!!

Thank you very much Márcio Carvalho for this informative and rich solution.

If I use Filter on the PopUp element, it will blur the entire PopUp, not only the background...

Solution

You need to go to this class and make the blur on the class content if you want just the content to be blurred. If you want everything you will need to change the main class, which is on the main container of the layout as content. Maybe you can do that using javascript.

But to avoid javascript, I am going to change the layout that I am using on my screen, you just need to follow the same instructions for your case.

Create this input on the layout that will say if you are with a popup open or not.

Then, inside of the container content, you are going to do an if-else to put the class that will say if a popup is open or not.


Dont forget to put the variable that says if a popup is active or not in the layout inputs.

This can be done using javascript, but for me, it's easier to show you how you can do it with this option.

PS: Dont forget to create the class at the modules' theme that I am giving to the layout when it's active

If you want everything to be blurred. Instead of putting at the content the class that will make the content be a blur. You can always go up to other parent classes and give that class, this way, the content, the header, everything will be blurred. But you will always to do the condition :)

I will give you an example.

Instead of the condition is on the content container it can go to the main container.

Let me know if this helps.

Check the OML and the link.

https://marcio-carvalho4.outsystemscloud.com/backgroundblur/Products?_ts=637827807445648264

Kind Regards,

Márcio

backgroundblur.oml

Worked like a champ!!!!

Thank you very much Márcio Carvalho for this informative and rich solution.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.