Blur the background behind a limelight Modal?

Big White Duck
1

I’m working on this: http://ci-clientservices.com/clientdev/gallery/

If you click the menu icon top right the modal that opens is done via a PopDrop Menu, which has the setting to blur the background.

I want to apply the same effect to the LL modal that you will see if you click the Privacy Policy or Cookie link in the footer.

I’m thinking the best approach is a SP Box inside a SP, but not entirely sure how to get the blur.

Anyone any ideas?

2

Oh, and @tav eventually I want to replace the PD Menu with another LL modal, so there is continuity. Is the animated BWD launcher icon thingie available as a standalone stack?

Ta.

3

You can of course already launch a limelight from the PD Menu as It has a custom class setting (and you can delete the pop drop content).

It will not animate however as that is triggered by PopDrop but do you really need it to animate when it is covered by a modal?

I can make it work by adding the limelight open class as well as the pop drop open class to the menu CSS but I just question as to whether it is worth it if it can’t be seen??

4

Nice one, didn’t think of that.

If the modal is transparent won’t the open icon show thru?

EDIT: Nope, you’re right, no need to have the launch icon animate. Yes, you can see it thru the modal, but once I’ve moved the close icon it’ll be more or less hidden.

Thanks.

5

Which begs the next question…

How do I put some responsive padding around the close icon? At present, the PD launch is inside a BP with 30, 20 & 10px padding at respective screen sizes.

Ta.

6

I would argue that it should fade out to 0 opacity in this case so that it is not confusing to the user when behind a modal. This can be achieved with the following CSS and makes it look a lot more polished.

.pd-switch-wrap{
    transition: opacity 120ms ease;
}

.pd-switch-wrap.lightbox-open{
    opacity: 0;
}
7

Lovely jubbly :-)

Just need to add that padding now!

8

I don’t understand the padding problem - what are you asking specifically?

Why is BluePrint not a solution?

You could obviously do it with a few lines of media query CSS if you want just like any stack but do you want to pad the icon and not the text or something?

9

I’m trying to get the close icon of the LL modal to be in the exact same place as the PD launcher icon.

10

Should add, the PD launch is inside a BP stack, with 10px padding on small, 20 on med and 30 on large. So it’s moving about a bit!

I can see how to add upto 20px padding to the limelight content, which in turn moves the close icon, and I could just set the launch BP stack to only one padding setting of 20 on all screens, but, well, you know, I like to be awkward.

:-)

11

So you need some media query code to match those 3 BP paddings then?

@media screen and (max-width: 640px){
.infix-close{
padding: 10px!important
}
}

rinse and repeat for the middle breakpoint to match your BP settings and let the large setting just match the stack setting.

12

You’re good at this. You could sell this stuff you know!

Thanks everso.

13

OK, last thing, Tav, feel free to ingore this and let others help :-)

Blurring the background of the LL modal. How?

Cheers.

14 
body.lightbox-open .stacks_top{
    filter:blur(20px);
}

adjust the blur amount as required

15

That’s awesome, thanks so much. I’ve super happy with that LL / menu setup now, again, thanks.

16

OK, just one tiny thing more…

Is it possible to add a delay to the blur?

I know, not at all tiny most likely, but sure, you gotta ask!

17

This might help you out, but knowing me, I am completely off base here.

18

Thanks. Found that earlier, couldn’t get it to work, but soon worked out I was being far to anal (the background was blurring everso slightly before the modal 100% opened) and so decided to not worry about it!

1 Like
19

You would need to use a transition which takes a transition time and an optional delay and optional easing as its parameter

transition: property time [delay] [easing]

I specifically didn’t put that code in as applying it to stacks_top, i.e. everything on the page may have unforeseen consequences. Better not to break anything else than give in to your anus.

2 Likes
20

Hi Steve

Not sure if it matters to you but the image of the person does not scale down uniformly - just an observation.

Paul