Forum | Appery.io

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:

     .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:

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

Hello,

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

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.

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

Hello,

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

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

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

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?

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

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

/pre

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

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