How To: Blur The Background Of A Pop-up

6 Apr


Be Careful.. this is pretty annoying to end-users if used in the wrong context.

Done right, it can help focus a users attention to something that you really want them to see. Make sure that offer is actually something that is relevant to them, and they actually want.

Using Javascript:

document.getElementsByClassName("container")[0].style.WebkitFilter = 'blur(4px)';
document.getElementsByClassName("container")[0].style.filter= 'blur(4px)';

This snippet will modify a HTML element with the name of “container” to have a CSS blur filter of 4px. Quite useful for demanding attention.

Be sure to un-set the filer, or set it to “0px” when you they close the modal.


Using CSS:

filter: 'blur(4px)';
-webkit-filter: 'blur(4px)';

This CSS class of “blur”, once applied to a element of a class “container”, will work like a charm. You just need to make sure you apply and remove the class of “blur” at the right time.

You can use your favorite popup tool, if they allow you to use these snippets.

If you use something like Ouibounce, or your own Modal system, it’d be easy to modify the code to use either one of the above snippets.


Easily Set-up With OptKit

When you’re editing your Kit, under the Action tab you’ll see the “On Impression” section:

Add the snippet (customized to your needs) to this text box. Every time this Kit fires an impression, the snippet will fire.

And you also add this snippet to the “On Conversion” and “On Close” sections to un-blur the element:

document.getElementsByClassName("container")[0].style.WebkitFilter = 'blur(0px)';
document.getElementsByClassName("container")[0].style.filter= 'blur(0px)';

Looking for some other fun ideas to test on your websites?

Check out CSS Tricks for some inspiration!

Try sharing this post with someone smart:
Email this to someoneShare on FacebookTweet about this on TwitterShare on LinkedIn