Как удалить фон страницы для Jquery Mobile Dialog?

Question

Сам диалог занимает только около 10% страницы, и я хотел удалить или превратить фон страницы диалога в прозрачный, чтобы предыдущая страница оставалась видимой.

Это js, который вызывает диалог:

$.mobile.changePage('#popdiv',{transition:'slide', role:'dialog'});

и это div

<div data-role="page" id="popdiv" data-role="page"  data-theme="e">        
  <div data-role="content">
  <h1>Congrats!</h1>
  </div>
</div>

Я пытался использовать пользовательский CSS, но, похоже, ничего не изменилось

div#popdiv {
   background: none; // i also used background-image and color and set it to none
}

и вот как я объявил css и js

<custom css>
<jquery mobile css>
<jquery min.js>
<phonegap.js>
<custom.js>
<jquerymobile.js>

Пожалуйста, помогите. большое спасибо.

Answer 1

В принятом ответе предлагается использовать сторонний диалог для jQuery Mobile.Если вы хотите использовать существующий встроенный диалог , то будет работать следующее:

Мой порядок CSS выглядит следующим образом:

<link rel="stylesheet" href="themeroller/mobile.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile.structure-1.1.0.min.css" />
<link rel="stylesheet" href="mobile-custom.min.css" />

Мой пользовательский CSS (тема поста)и мобильная структура JQM CSS):

.ui-dialog-background {
    opacity: 0.5;
    display: block !important;
    -webkit-transition: opacity 0.5s ease-in;
}

.ui-dialog-background.pop.in {
    opacity: 1;
    -webkit-transition: opacity 0.5s ease-in;
}

.ui-dialog {
    min-height: 100% !important;
    background: transparent !important;
}

И JavaScript при загрузке страницы:

$(function() {
    $('div[data-role="dialog"]').live('pagebeforeshow', function(e, ui) {
    ui.prevPage.addClass("ui-dialog-background ");
    });

    $('div[data-role="dialog"]').live('pagehide', function(e, ui) {
    $(".ui-dialog-background ").removeClass("ui-dialog-background ");
    });
});

Источник: Том Кларксон

Answer 2

Для jQuery> 1.9 функция live () удалена.Таким образом, вы можете изменить JavaScript, который Junto опубликовал выше, следующим образом:

$(document).on('pagebeforeshow', 'div[data-role="dialog"]', function (e, ui) {
    ui.prevPage.addClass("ui-dialog-background ");
});

$(document).on('pagehide', 'div[data-role="dialog"]', function (e, ui) {
    $(".ui-dialog-background ").removeClass("ui-dialog-background ");
});

Answer 3

Я нашел это:

https://github.com/jtsage/jquery-mobile-simpledialog

Это мобильный плагин jquery, и это именно то, что я хочу.:)

Answer 4

Просто добавьте это к вашему CSS

.ui-mobile [data-role="dialog"], .ui-page {
display:block !important;
}

Это работает для меня.