Forum | Appery.io

Hi,

I need to use a pop-up in my mobile application to check internet connectivity or when to leave the app if I want to open a link in the default mobile browser.
The default configuration of pop-up works fine. However, I need to make its background transparent.

I followed several discussions on the forum and specially this one https://getsatisfaction.com/apperyio/..., but nothing changes in the background.
Can you please assist me how to do this?

Thanks in advance,

Hi,

Please follow steps below to do popups transparent:

1 Create new JavaScript. And populate it by following code:

pre
code
$(document).on('pagebeforeshow', 'div[data-role="page"][data-dialog="true"]', function (e, ui) {
// make parent page transparent
ui.prevPage.addClass("ui-dialog-background ");
});
$(document).on('pagehide', 'div[data-role="page"][data-dialog="true"]', function (e, ui) {
$(".ui-dialog-background ").removeClass("ui-dialog-background ");
});
/code
/pre

2 Create new CSS. And populate it with CSS below: http://prntscr.com/37zz0n/direct

pre
code
.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;
}
/code
/pre

Add JS on page Load event:
pre
code
.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;
}

/code
/pre

Step 3 is wrong, is the same as step 2....can you post the JS for page load event?
Thanks!

Sorry, You don't need the step "Add JS on page Load event: "

Hi Igor,
I followed your procedure, for step 1 & 2. And nothing happened. My popup still shows as before, actually, the "X" for closing the popup disapperar now...

Hi,

Can you share your app with a href="mailto:support@appery.io" rel="nofollow"support@appery.io/a or send us app public link.

Hi Igor,

It works fine. Thank you!

To make your answer more useful for other people, please delete the 'Add JS on page Load event' section, because it is not needed.

Thanks again.