JSFiddle - React, Tailwind, and code Playground
by Omar X
HTML
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<div data-role="page" id="home">
<div data-role="header">
<h1>Home</h1>
</div>
<div data-role="content"> <a data-role="button" href="#p2">Go to Page 2</a>
</div>
</div>
<div data-role="page" id="p2">
<div data-role="header">
<h1>Page 2</h1>
</div>
<div data-role="content"> <a data-role="button" href="#home">Home</a>
</div>
<div data-role="popup" id="popupStatus" data-position-to="window" data-corners="true" data-dismissible="false" data-history="false">
<div data-role="content">
<p>Do you want to Reset the progress</p>
<div style="width:40%;float:left"> <a href="#" onClick="resetprogress();" data-role="button" data-inline="true" data-theme="c">
Yes
</a>
</div>
<div style="width:40%;float:right;"> <a href="#" class="ui-corner-all" data-role="button" data-rel="back" data-inline="true" data-transition="flow" data-theme="b">
No
</a>
</div>
</div>
</div>
</div>
CSS
.ui-popup {
min-height: 100px;
}
JavaScript
$(document).on("pageshow", "#p2", function () {
setTimeout(function () {
$("#popupStatus").popup("open");
}, 100);
});