прозрачные вложенные диалоги jquerymobile

Question

Я пытаюсь создать модальный диалог с помощью jquery mobile rc2.
Мне удалось избавиться от уродливого серого фона по умолчанию, и теперь на странице, где он создается, появляется диалоговое окно. Вы можете посмотреть здесь , чтобы узнать, как это сделать. Проблема в том, что у меня есть диалог, в котором есть несколько элементов <li>, и каждый из них открывает другой диалог. Второй диалог не открывается поверх предыдущего. Вместо этого я получаю белый фон, который даже уродливее серого.
Как сделать так, чтобы вложенный диалог отображался поверх родительского с прозрачным фоном? Должен ли я закрыть первый диалог перед открытием нового?
Вы можете посмотреть код в действии здесь .
Заранее спасибо!

Answer 1

@ cpak прав, даже если он не предоставил никакого решения проблемы.Однако я решил проблему, выполнив следующие действия:
1) добавьте .inactive класс на родительскую страницу

.inactive
{
    display: block !important;
}

2) При открытии любого дочернего всплывающего окна снова добавьте этот класс

3) измените классы .ui-dialog и .ui-dialo-overlay следующим образом:

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

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

4) Когда вы закроете последнее всплывающее окно, удалите класс .inactive, чтобы восстановить исходную непрозрачность

Надеюсь, это кому-нибудь поможет, но надеюсь, что jquery mobile еще больше изменит это странное поведение!

Answer 2

см. http://tqcblog.com/2012/04/19/transparent-jquery-mobile-dialogs/ для полного рабочего решения.Это та же идея, что и в решении andreapier, но также предоставляет небольшой javascript-хук jQueryMobile для привязки открытия и закрытия диалогов.

отлично работает с последней версией jQueryMobile (1.1.0).

Я предлагаю рассмотреть возможность удаления причудливых переходов CSS для прозрачности для старых мобильных браузеров.

Answer 3

У нас не было времени на то, чтобы разобраться в этом, но кажется, что это не «дополнительный» белый оверлей, который вы получаете, а то, что страница #main становится невидимой, а белый цвет фонана самом деле элемент тела.Так что вопрос в том, почему #main становится невидимым, я думаю.Надеюсь, это поможет каким-то образом =)