Hi there,
Does anyone know how to make the background of a popup transparent? When i open the popup, the background goes completely black.
Regards,
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
Hi Meyrick,
This is a known issue and we are working on changing it. It is actually a behavior difference between the jquery dialog and pop-up components.
-Shelley
thanks for the info. hopefully it changes soon as it is a nice feature to use
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
Ricardo, thank you very much for all your help. it works brilliantly!