<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script type='text/javascript' src="https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<div data-role="page">
<div data-role="header" data-position="fixed" data-tap-toggle="false"> <a href="#" class="ui-btn ui-btn-b ui-btn-icon-right ui-icon-bars panel">Panel</a>
<h1>Header</h1>
<a href="#about" data-rel="popup" class="ui-btn ui-btn-icon-left ui-icon-info">Home</a>
</div>
<div role="main" class="ui-content"> <a href="#" class="ui-btn ui-btn-b ui-btn-icon-left ui-icon-info ui-corner-all" id="foo">Click here</a>
<div class="ui-body ui-body-a ui-corner-all">
<h3>Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan blandit fermentum. Pellentesque cursus mauris purus, auctor commodo mi ullamcorper nec.</p>
</div>
<form>
<div data-role="rangeslider">
<label for="range-1a">Rangeslider:</label>
<input type="range" name="range-1a" id="range-1a" min="0" max="100" value="40" />
<label for="range-1b">Rangeslider:</label>
<input type="range" name="range-1b" id="range-1b" min="0" max="100" value="80" />
</div>
</form>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<h1>Footer</h1>
</div>
</div>
<!-- External Panel -->
<!-- / -->
</body>
</body>
</html>
.blur-filter {
filter: blur(2px);
filter: blur(2px);
filter: blur(2px);
filter: blur(2px);
filter: blur(2px);
}
$(document).on("pagecreate", function () {
$("#foo").on("click", function () {
// close button
var closeBtn = $('<a href="#" data-rel="back" class="ui-btn-right ui-btn ui-btn-b ui-corner-all ui-btn-icon-notext ui-icon-delete ui-shadow">Close</a>');
// text you get from Ajax
var content = "<p>Lorem ipsum dolor sit amet, consectetur adipiscing. Morbi convallis sem et dui sollicitudin tincidunt.</p>";
// Popup body - set width is optional - append button and Ajax msg
var popup = $("<div/>", {
"data-role": "popup"
}).css({
width: $(window).width() / 2.5 + "px",
padding: 5 + "px"
}).append(closeBtn).append(content);
// Append it to active page
$.mobile.pageContainer.append(popup);
// Create it and add listener to delete it once it's closed
// open it
$("[data-role=popup]").popup({
dismissible: false,
history: false,
theme: "b",
/* or a */
positionTo: "window",
overlayTheme: "b",
/* "b" is recommended for overlay */
transition: "pop",
beforeposition: function () {
$.mobile.pageContainer.pagecontainer("getActivePage")
.addClass("blur-filter");
},
afterclose: function () {
$(this).remove();
$(".blur-filter").removeClass("blur-filter");
},
afteropen: function () {
/* do something */
}
}).popup("open");
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.