Problem with Popup dialog transparency

[Bożena Garbińska]

Hello,

Basing on previous post concerning popup transparency I was able to implement it but for some reason it works only on my start page. On any other page when the dialogs pop up the background behind them is completely invisible.

This is what I have as CSS asset:

Code: Select all

     .ui-dialog-contain 
     { 
         opacity: 1 !important; 
         background: #FFFFFF !important; 
     } 
     .ui-dialog .ui-header .ui-btn-icon-notext 
     { 
         display: none !important; 
     } 
     .ui-dialog-background 
     { 
         opacity: 0.3; 
         display: block !important; 
         -webkit-transition: opacity 0.8s ease-in; 
     } 

     .ui-dialog-background.pop.in 
     { 
         opacity: 1; 
         -webkit-transition: opacity 0.8s ease-in; 
     } 

     .ui-dialog 
     { 
         min-height: 100% !important; 
         background: transparent !important; 
     } 

And this JS which I run on page Load event:

Code: Select all

     .ui-dialog-contain 
     { 
         opacity: 1 !important; 
         background: #FFFFFF !important; 
     } 
     .ui-dialog .ui-header .ui-btn-icon-notext 
     { 
         display: none !important; 
     } 
     .ui-dialog-background 
     { 
         opacity: 0.3; 
         display: block !important; 
         -webkit-transition: opacity 0.8s ease-in; 
     } 

     .ui-dialog-background.pop.in 
     { 
         opacity: 1; 
         -webkit-transition: opacity 0.8s ease-in; 
     } 

     .ui-dialog 
     { 
         min-height: 100% !important; 
         background: transparent !important; 
     } 

Please help me figure out what I am doing wrong.
Cheers.

[Illya Stepanov]

Hello,

Are you adding CSS rule to a JS asset? On what page you are adding this Load event?

[Bożena Garbińska]

Hi Ilya

I just added this as new CSS:

And my Load event is triggered by 'PickFoodIngridients' page which is set as my start page.

And this works only for this page. When I open popups on any other page the background is not visible so the dialog background is not transparent.

[Illya Stepanov]

Can you show the full listing of code on this Load event?

[Igor]

Hello,

Please try to use your popup as "Screen Template". http://docs.appery.io/documentation/w...

[Bożena Garbińska]

Sure. This is my code (found on this forum):

Code: Select all

         $('div[data-role="dialog"]').live('pagebeforeshow', function (e, ui) { 
             // make parent page transparent 
             ui.prevPage.addClass("ui-dialog-background "); 
         }); 

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

[Bożena Garbińska]

Hello Igor,
I am not sure if I follow you correctly. If you suggest to create one template and then recreate my popups using this template then it will not be possible in my case since
I have more than 20 popups in my project. Recreating them is not an option, some are pretty complex with separate data services.
Could you please give me some more hints on what steps should be taken to make all my popups use transparent background, and not only these launched from my start page?

[Igor]

Try to add JS code on screens load event where your popup dialog not transparent.
pre
$('div[data-role="dialog"]').live('pagebeforeshow', function (e, ui) {
// make parent page transparent
ui.prevPage.addClass("ui-dialog-background ");
});

Code: Select all

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

/pre

[Bożena Garbińska]

I tried and it does not work unfortunately. Any ideas why?

[Alena Prykhodko]

Hi, Bożena, could you please try to debug your app http://docs.appery.io/documentation/d...? Any errors?