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 ");

});

});

jquery mobile properties and methods

PROPERTIES

PROPERTIES

version = 1.1.1
ns =
subPageUrlKey = ui-page
activePageClass = ui-page-active
activeBtnClass = ui-btn-active
focusClass = ui-focus
ajaxEnabled = true
hashListeningEnabled = true
linkBindingEnabled = true
defaultPageTransition = fade
maxTransitionWidth = false
minScrollBack = 250
touchOverflowEnabled = false
defaultDialogTransition = pop
loadingMessage = loading
pageLoadErrorMessage = Error Loading Page
loadingMessageTextVisible = false
loadingMessageTheme = a
pageLoadErrorMessageTheme = e
autoInitializePage = true
pushStateEnabled = true
ignoreContentEnabled = false
orientationChangeEnabled = true
buttonMarkup = [object Object]
keyCode = [object Object]
nsNormalizeDict = [object Object]
browser = [object Object]
ajaxBlacklist = false
transitionHandlers = [object Object]
transitionFallbacks = [object Object]
path = [object Object]
base = [object Object]
urlHistory = [object Object]
dialogHashKey = &ui-state=dialog
allowCrossDomainPages = false
navreadyDeferred = [object Object]
zoom = [object Object]

METHODS

silentScroll ()
nsNormalize ()
getInheritedTheme ()
closestPageData ()
enhanceable ()
hijackable ()
haveParents ()
getScreenHeight ()
widget ()
media ()
gradeA ()
page ()
defaultTransitionHandler ()
getMaxScrollForTransition ()
focusPage ()
getDocumentUrl ()
getDocumentBase ()
_bindPageRemove ()
loadPage ()
changePage ()
dialog ()
collapsible ()
collapsibleset ()
navbar ()
listview ()
checkboxradio ()
button ()
textinput ()
slider ()
selectmenu ()
fixedtoolbar ()
showPageLoadingMsg ()
hidePageLoadingMsg ()
initializePage ()
_handleHashChange ()