POPUP WITH 'BLURRED BACKGROUND'

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.

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.


$( "#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" );