如何使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中的标题下的弹出式滑块向下滑动

回答

相关问题