Make pop-up background transparent

[Ridha Gadhgadhi]

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,

[Igor]

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

[Alex GG]

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

[Igor]

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

[Alex GG]

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

[Igor]

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.

[Ridha Gadhgadhi]

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.