JSFiddle - React, Tailwind, and code Playground
HTML
<div data-role="page" id="home" style="background-color: #FFFFFF; padding-top:-1px;">
<div data-role="content" id="content_home">
<h1>PAGE 1</h1>
<ul data-role="listview">
<li id="goto_page2"><a href="#">
<h2>Click</h2>
</a></li>
</ul>
</div>
</div>
<div data-role="page" id="page2">
<div class='boo'>
<img id='imgbkgr' style="background:none">
</img>
</div>
<div data-role="content" id="content_page2">
<h1>PAGE 2</h1>
<ul data-role="listview">
<li id="goto_home"><a href="#">
<h2>Click</h2>
</a></li>
</ul>
</div>
</div>
CSS
.boo {
position: fixed;
padding:0px;
padding-top:0px;
top:0;
}
JavaScript
$('#goto_page2').on("vclick", function(event, ui) {
event.preventDefault();
event.stopPropagation(); $("#imgbkgr").attr("style","background:url('http://placekitten.com/300/300'); -webkit-filter: grayscale(100%) blur(2px); background-size: cover; background-position: center; height:300px;width:300px");
$.mobile.changePage( "#page2", {
transition: "slide",
reverse: false,
allowSamePageTransition: true
});
});
$('#goto_home').on("vclick", function(event, ui) {
event.preventDefault();
event.stopPropagation();
$.mobile.changePage( "#home", {
transition: "slide",
reverse: true,
allowSamePageTransition: true
});
});