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.
document.getElementsByClassName("container").style.WebkitFilter = '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.
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").style.WebkitFilter = 'blur(0px)';
Looking for some other fun ideas to test on your websites?
Check out CSS Tricks for some inspiration!