change background color with ui-dialog-background transparent dialog

Question

Good day,

I am really stuck here. I have a working transparent background, thanks to this blog: http://tqclarkson.com/2012/04/19/transparent-jquery-mobile-dialogs/

But no matter what I try I just cannot make the transparent background different color. I need the background color of the parent content to be black and transparent when dialog pops up. So far I have this, as per the blog:

.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;
}

And JS:

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

I tried various different approaches, but none of them work. Is there any way to make the transparent background to be darker color?

Thank you kindly, Victor.

Answer 1

This previous answer might address what you're trying to do: How to code a JavaScript modal popup (to replace Ajax)?

I've used this approach and it works well to "grey out" the background while the modal is visible. You should be able to alter the color and/or opacity to suit your needs.