Popup with “Blurred Background”


Note: blur filter is not supported by latest versions of IE and FF (source).

Here is a simple effect to “spice up” your webapp whenever a Popup is open. This effect will add “Depth of Field” to current page.

Blurred background

Depth of Field (DOF)

The trick is simple, all you need is to create a class, add it to active page on popupbeforeposition event and then remove it on popupafterclose.

.blur-filter {
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
    filter: blur(2px);
}

However, adding blur class depends on whether internal or external widgets are used. For example, if you are using an internal popup, header and footer, the class shouldn’t be added to internal popup.

$( "#popupID" ).on( "popupbeforeposition", function () {
    $.mobile.pageContainer.pagecontainer( "getActivePage" )
        .not(this) /* exclude popup */
        .addClass( "blur-filter" );
}).on( "popupafterclose", function () {
    $( ".blur-filter" )
        .removeClass( "blur-filter" );
});

If an external popup and internal header and footer.

$.mobile.pageContainer.pagecontainer( "getActivePage" )
    .addClass( "blur-filter" );

If all widgets are external.

$.mobile.pageContainer.pagecontainer( "getActivePage" )
    .addClass( "blur-filter" );

$( ".ui-header, .ui-footer" ).addClass( "blur-filter" );

Here is a demo of a dynamic external popup with internal header and footer.

Buy Me A Coffee :) @ ko-fi.com

Advertisements

8 thoughts on “Popup with “Blurred Background”

  1. Hi Chris,

    The problem is that you place the popup within “content” div. Popup’s div should be a direct child of page’s div – sibling to “content” div not inside it.

    Unfortunately, blur filter isn’t supported by FireFox nor IE (latest versions). Please refer to this link.

    Regards,

  2. I’m having an issue in trying to make the popup display without the blur filter. When I display the popup in Chrome, both the page and popup are blurred. Also, the effect doesn’t seem to work for me in Firefox.

    I have the popup div defined as a child of the content container.
    Here’s my code, which I believe follows the above instructions.

    JSfiddle

    Thanks,
    Chris

Drop me a line or two ;)

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s