如何使Jquery Mobile中的標題下的彈出式滑塊向下滑動

現在，當我召喚一個彈出窗口時，它會出現在標題上，然後向下滑動。看看它現在的樣子。如何使Jquery Mobile中的標題下的彈出式滑塊向下滑動

enter image description here

我想彈出從標題下方滑落。我試着設置彈出窗口的z索引低於標題，但它沒有做任何事情。顯然你需要明確地設置元素的位置來使用z索引，但是當我這樣做時，它完全搞砸了UI。

下面是相關的代碼

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/

來源

2014-10-29 Eric Guan

請創建的jsfiddle或代碼段。 – 2014-10-29 05:05:07

http://jsfiddle.net/guanzo/gvsqenvf/ – 2014-10-29 05:40:35

我覺得用一個JQM彈出窗口小部件不會爲這個工作，因爲JQM創建覆蓋頁面的透明覆蓋圖，然後是彈出框呃在overlay之上，然後它將彈出框放入容器中。所以沒有辦法讓彈出窗口在標題下。相反，您可以爲彈出窗口使用絕對定位的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>

設置的CSS絕對定位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

來源

2014-10-29 14:13:34 ezanker

這工作，非常感謝 – 2014-10-29 22:28:18

如何使Jquery Mobile中的標題下的彈出式滑塊向下滑動

回答

相關問題