Question

i’m trying to create a modal dialog with jquery mobile rc2.
I managed to get rid of the default ugly grey background and now the dialog appears over the page where it is created. You can look here to know how to do this.
The problem is that i have a dialog that has some <li> elements inside and each of them opens another dialog. The second dialog does not get opened over the past one. Instead i get a white background that is even uglyer than the grey one.
How to make the nested dialog appear over the parent one with a transparent background? Should i close the first dialog before opening the new one?
You can look the code in action here.
Thanks in advance!

Answer 1

@cpak is right even if he didn’t provide any solution to the problem.
However i did solve the issue following this steps:
1) add a .inactive class to the parent page

.inactive
{
    display: block !important;
}

2) When you open any child popup add that class again

3) edit the .ui-dialog and .ui-dialo-overlay classes like this:

.ui-dialog
{
    background-color: rgba(34,34,34,0.25) !important;
}

.ui-dialog.ui-overlay-a 
{
    background-image: none;
}

4) When you close the last popup remove the .inactive class to restore the original opacity

Hope this helps someone, but hope that jquery mobile changes this odd behaviour even more!