jquery mobile dialog transparent

http://tqcblog.com/2012/04/19/transparent-jquery-mobile-dialogs/


The basic approach to fixing the dialogs is:

• Make the dialog overlay transparent
• When opening a dialog, add the class ui-dialog-background to the previous page that prevents it from being hidden
• remove the class when the dialog closes

For multi page sites you will also need to set the data-dom-cache attribute on the background page to prevent it being removed from the DOM while still visible.

.ui-dialog-background {

opacity: 0.5;

display: block !important;

-webkit-transition: opacity 0.5s ease-in;

}



.ui-dialog-background.pop.in {

opacity: 1;

-webkit-transition: opacity 0.5s ease-in;

}



.ui-dialog {

min-height: 100% !important;

background: transparent !important;

}













$(function() {

    $('div[data-role="dialog"]').live('pagebeforeshow', function(e, ui) {

ui.prevPage.addClass("ui-dialog-background ");

});



    $('div[data-role="dialog"]').live('pagehide', function(e, ui) {

$(".ui-dialog-background ").removeClass("ui-dialog-background ");

});

});