CODEWITHSUNDEEP
jqueryjquery-mobilemodal-dialog
andreapier
andreapier

Reputation: 2958

transparent nested dialogs jquerymobile

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!

Upvotes: 0

Views: 4541

Answers (3)

Guillaume Gendre
Guillaume Gendre

Reputation: 2534

see http://tqcblog.com/2012/04/19/transparent-jquery-mobile-dialogs/ for a complete working solution. It is the same idea as the andreapier solution but gives also the small jQueryMobile javascript hook to bind the opening and closing of the dialogs.

working fine with the latest jQueryMobile (1.1.0).

I suggest to consider removing the fancy css transitions on opacity for older mobile browsers.

Upvotes: 1

andreapier
andreapier

Reputation: 2958

@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!

Upvotes: 1

cpak
cpak

Reputation: 1464

Haven't had time to look into it very much, but it seems like it's not really an "extra" white overlay you're getting, but rather that the #main page becomes invisible and the white color of the background is actually the body element. So the question is why #main becomes invisible, I guess. Hope this helps in some way =)

Upvotes: 1

Related Questions