Why does opening a dialog clear the page underneath it?

[Al Hooton]

In one of the master-detail pages in my app, there is a button in the detail pane that opens a dialog when the button is clicked (the "Click" event of the button executes the "Open as dialog" action to open the dialog). That is all working fine.

However, when the dialog opens, the page underneath it turns all white. When the dialog is closed, I am returned to the master-detail page, but without the detail visible that was there when the dialog was opened.

This does not seem correct to me. When the dialog is opened, the master-detail content underneath it should remain exactly as-is, and should be there unchanged when the dialog is closed.

Why does this happen?

[Yurii Orishchuk]

Hi Al.

Appery based on jqm. And dialog is a jqm implementation.

You can check out that dialogs work the same in jqm here: http://demos.jquerymobile.com/1.2.0-b...

But there is a solution to make the page underneath the dialog visible but not avaliable to interact with.

Please follow steps below to do dialogs transparent:

1 Create new JavaScript. And populate it by following code: http://prntscr.com/37zyfr/direct

precode

$(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

precode

.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

That's all.

Regards.

[Al Hooton]

Yurii, thank you for this. It helps with half of the problem, but only half. The page is visible, but when the dialog is closed, it still navigates to the underlying page again. Since this is a master-detail page, what comes up is the master, but no detail. What I really need is a dialog that acts like dialogs in most UI frameworks: It is strictly an overlay, and when closed the user is still on the underlying page, unchanged. In the same way a javascript "alert" works, for instance.

I'm beginning to believe this is not possible in Appery/jqm?

[Al Hooton]

Another option would be if there was some way I could navigate to a master-detail page with a specific detail pane already open, instead of the normal behavior where there is nothing in the detail pane. If I could do that, I could force the dialog to navigate back to the master-detail page with the right detail pane loaded when the dialog closed. But, I can't see a way to navigate to a master-detail page and specify that I want one of the detail pages to be loaded immediately?

[Yurii Orishchuk]

Al,

Of course you could to navigate to the page you need when panel is closed.

For these purpose you need to:

1 Go to your dialog page.

2 Create JS event handler on "Page hide" event. And fill it with following code: http://prntscr.com/3f1xyu/direct

pre
code

//Where "Screen13" is the page you want to navigate after dialog is closed.
navigateTo("Screen13")

/code
/pre

But we guess you have some specific problem. Please give us your public link and describe steps to reproduce the problem.

And we will take a look.

Regards.

[Al Hooton]

Yurii, thank you again. I have tried your suggestions, and none of them is really working the way I would like.

I appreciate that you will take a look at my app. Is there a private way to communicate the information necessary for you to do so? It will require me providing you a login account in the app, etc., which is fine, but I would rather not communicate that here in a public forum.

Thank you!

[Nikita]

Hello,

You can provide required information via email. a href="mailto:support@appery.io" rel="nofollow"support@appery.io/a

[Al Hooton]

Hello, I have provided that information via email. I look forward to your thoughts. Thank you!

[Al Hooton]

Apologies, I thought I had shared my app with you. I have done so now.

Thanks!

[Yurii Orishchuk]

Hi Al.

Please specify steps how we can to reproduce the problem.

Also we need a login and password for your app to login.

Regards.