I started developing my first mobile app using jquery mobile. So far it has been going nicely, but I am not able to solve a specific popup behaviour.
What I want it for a popup to show once the user loads the app. This popup should be similar to a add to home popup like you see in many apps. It is intended to point the users direction to the fixed footer with some important buttons. I managed to insert this popup and open it on page load, but there are two things I am not able to do.
My popup loads and disappears, which I want, and that is all OK. However, once you reload the page, or navigate to another and go back, it opens up again. This is annoying for the user. I would like it to open up only the first time you load the home page.
I would like to position the popup above the footer, so not over it, but above. How would I do this? Do I use x and y, and if yes how?
Is there a way for the overlay effect to obscure the whole page, except the footer?
Thank you.
Here is the code:
<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>
You can use sessionStorage or localStorage to keep track of the information related to whether pop up is shown or not.
You code would be something as below
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');
}
you can check the live fiddle here http://jsfiddle.net/mayooresan/MyaE9/
Also did some tweaking to your html. You had markup errors in your html page.
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.