![](/img/trans.png)
[英]Show loading message when loading an external page in a JQuery Mobile app
[英]Jquery mobile: How to show popup only when first loading the page?
我開始使用jquery mobile開發第一個移動應用程序。 到目前為止,一切進展順利,但是我無法解決特定的彈出窗口行為。
我希望用戶加載應用程序后顯示的彈出窗口是什么。 就像在許多應用程序中看到的那樣,此彈出窗口應類似於添加到主彈出窗口。 旨在通過一些重要的按鈕將用戶指向固定的頁腳。 我設法插入了此彈出窗口並在頁面加載時將其打開,但是有兩件事我做不到。
我的彈出窗口加載並消失了,這是我想要的,一切正常。 但是,一旦您重新加載頁面或導航到另一個頁面並返回,它就會再次打開。 這對用戶來說很煩。 我希望它僅在您首次加載主頁時打開。
我想將彈出窗口放在頁腳上方,所以不要放在頁腳上方,而是放在上方。 我該怎么做? 我是否使用x和y,如果是,如何使用?
有沒有一種方法可以使覆蓋效果遮蓋整個頁面(頁腳除外)?
謝謝。
這是代碼:
<div data-role="page" id="home">
<div data-position="fixed" data-role="header" data-theme="d">
<h1>Prva pomoć</h1>
<button data-icon="info" data-iconpos="right"></button>
</div>
<div data-role="content">
<ul data-role="listview" data-divider-theme="d">
<li data-role="list-divider">Ne reagira i ne diše
</li>
<li><a href="#page2">Oživljavanje</a></li>
<li><a href="#page3">Oživljavanje + AVD</a></li>
<li data-role="list-divider">Ne reagira, ali diše</li>
<li><a href="#page4">Bočni položaj</a></li>
<li data-role="list-divider">Ostalo</li>
<li><a href="#page4">Gušenje</a></li></ul></div>
<div id="popspot"></div>
<div data-role="popup" id="popup" data-transition="slidedown" data-position-to="#popspot" data-theme="a" data-overlay-theme="e" data-history="true">
<p>U slučaju hitnoće koristi ovaj izbornik!<p></div>
<script type="text/javascript" language="JavaScript">
$(":jqmData(role='page'):last").on("pageshow", function(event) {
$("#popup", $(this)).popup("open");
setTimeout(function(){
$("#popup").popup("close");
}, 3000);
});
</script>
<div data-role="footer" id="hitnizbor" data-position="fixed" class="nav-glyphish-example">
<div class="nav-glyphish-example" data-grid="b" data-role="navbar" data-theme="e">
<ul>
<li><a href="#popup" data-rel="popup" id="chat" data-icon="custom">Zovi Hitnu</a></li>
<li><a href="#" id="email" data-icon="custom">Oživljavanje</a></li>
<li><a href="#" id="skull" data-icon="custom">Osobni podaci</a></li>
</ul>
</div>
您可以使用sessionStorage或localStorage來跟蹤與是否顯示彈出窗口有關的信息。
您的代碼將如下所示
if (localStorage.popUpShown != 'true') {
// window will position the pop up to center
$('#popup').popup('open', {positionTo: 'window'});
localStorage.popUpShown = 'true';
setTimeout(function () {
$("#popup").popup("close");
}, 3000);
}
else{
// Can remove this alert in development enviornment.
alert('already shown the popup');
}
您可以在這里查看現場小提琴 http://jsfiddle.net/mayooresan/MyaE9/
還對您的html做了一些調整。 您的html頁面中存在標記錯誤。
<div data-role="page" id="home">
<div data-position="fixed" data-role="header" data-theme="d">
<h1>Prva pomoć</h1>
<button data-icon="info" data-iconpos="right"></button>
</div>
<div data-role="content">
<ul data-role="listview" data-divider-theme="d">
<li data-role="list-divider">Ne reagira i ne diše</li>
<li><a href="#page2">Oživljavanje</a>
</li>
<li><a href="#page3">Oživljavanje + AVD</a>
</li>
<li data-role="list-divider">Ne reagira, ali diše</li>
<li><a href="#page4">Bočni položaj</a>
</li>
<li data-role="list-divider">Ostalo</li>
<li><a href="#page4">Gušenje</a>
</li>
</ul>
<div id="popspot"></div>
<div data-role="popup" id="popup" data-transition="slidedown" data-position-to="#popspot" data-theme="a" data-overlay-theme="e" data-history="true">
<p>U slučaju hitnoće koristi ovaj izbornik!</p>
</div>
</div>
<div data-role="footer" id="hitnizbor" data-position="fixed" class="nav-glyphish-example">
<div class="nav-glyphish-example" data-grid="b" data-role="navbar" data-theme="e">
<ul>
<li><a href="#popup" data-rel="popup" id="chat" data-icon="custom">Zovi Hitnu</a>
</li>
<li><a href="#" id="email" data-icon="custom">Oživljavanje</a>
</li>
<li><a href="#" id="skull" data-icon="custom">Osobni podaci</a>
</li>
</ul>
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.