Как сделать всплывающее скольжение вниз из-под заголовка в JQuery Mobile

Question

Прямо сейчас, когда я вызываю всплывающее окно, оно появляется над заголовком, а затем скользит вниз под ним. Посмотрите, как это выглядит сейчас.

Я хотел бы всплывающее окно, чтобы скользить вниз из-под заголовком. Я попытался установить индекс z всплывающего окна ниже заголовка, но он ничего не сделал. Очевидно, вам нужно явно установить позиционирование элементов для использования индекса z, но когда я сделал это, он полностью испортил интерфейс.

Вот соответствующий код

HTML:

<div data-role="popup" id="alertPopup" class="ui-content" data-shadow="false" data-transition="slidedown" data-dismissible="false" data-corners="false" data-position-to="origin"> 
    <p id="popupText"></p> 
</div> 

JS:

var horizontal = Math.floor(window.innerWidth/2); 
var vertical = 80; 

var popupOptions = { 
    x: horizontal, 
    y: vertical 
}; 

if (status == google.maps.DirectionsStatus.ZERO_RESULTS) { 
       $("#popupText").text("No transit options could be found.");//using popups instead of alerts because these will go away by themselves instead of forcing user to tap. 
       $("#alertPopup").popup("open",popupOptions); 
        setTimeout(function() { 
        $("#alertPopup").popup("close"); 
       }, 3000); 
     } 

http://jsfiddle.net/guanzo/gvsqenvf/

Answer 1

Я думаю, что с помощью jQM всплывающий виджет не будет работать для этого, потому что jQM создает прозрачный оверлей, который покрывает страницу, затем всплывающее окно содержит выше надложения, а затем помещает всплывающее окно в контейнер. Таким образом, нет возможности открыть всплывающее окно под заголовком.

Вместо этого вы можете использовать абсолютно позиционированное DIV для своего всплывающего окна и использовать метод jQuery slideToggle() для его отображения.

Добавьте DIV уведомительного содержания:

<div data-role="content" id="content"> 
    <div id="notify" class="ui-body-inherit ui-content"> 
     <p id="notifyText">hello</p> 
    </div> 

    I am Content 
</div> 

Setup СМЧ абсолютно позиционировать DIV и скрыть его, пока не понадобится:

#notify { 
    border-width: 1px; 
    border-style: solid; 
    display: none; 
    position: absolute; 
} 
#notify p { 
    margin: 0; 
} 

В сценарии установите текст, вычислить положение и покажите его с помощью слайд-переключателя (я добавил тайм-аут на шоу, чтобы скрипка закончила рисовать страницу до того, как будет показано уведомление).

$("#notifyText").text("No transit options could be found."); 
var $notify = $("#notify"); 
var vertical = $(".ui-header").outerHeight() -1; //height of header 
var w = $notify.width(); 
var left = (Math.floor((window.innerWidth - w)/2)); 
$notify.css({ left: w + "px", top: vertical + "px"}); 
setTimeout(function() { 
    $notify.slideToggle(500); //delay showing for the fiddle 
}, 500); 

setTimeout(function() { 
    $notify.slideToggle(500); 
}, 5000); 

Ваш обновленный FIDDLE