transparent background for popup

Posted by meyrick on 19-Mar-2014 01:54

hi there

Has been any updates on how to make the background of the popup transparent?

thanks.

Posted by Jean Richert on 21-Mar-2014 04:02

All Replies

Posted by Jean Richert on 21-Mar-2014 04:02
Posted by meyrick on 25-Mar-2014 02:16

Hi Jean, yes it is.

Posted by meyrick on 09-Apr-2014 01:27

Hi there, has anybody found a way to do this yet?

Posted by Ricardo Perdigao on 09-Apr-2014 02:24

Hi Meyrick,

Please check the Sample Project I shared with you with a solution.  Areas changed:

- Created a CSS file called Transparent

- Created a JavaScript file called Transparent

Code for the CSS:

.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: 80% !important;
    background: transparent !important;
    z-index: 3000;
}

Code for the JavaScript:

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


Please let us know if this helped and if you have further questions.
Regards,

Ricardo

This thread is closed