jQuery Mobile Popup Window with Blurred Background

A mobile-first jQuery & CSS3 popup widget for creating a modal window with blurred 'background' content, that will focus your users on your popup window. 

How to use it:

1. Include the required jQuery library and jQuery Mobile in the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script>

2. Create a link to open a modal window.

<a href="#" class="ui-btn ui-btn-b ui-btn-icon-left ui-icon-info ui-corner-all" id="demo">Click here</a>

3. Enable the modal window and set the custom messages for the modal window. More config options can be found in the Javascript below.

$(document).on("pagecreate", function () {
$("#demo").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>Your Content Goes Here</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");
});
});

4. Apply an CSS3 blur effect to your background content.

.blur-filter {
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -o-filter: blur(2px);
  -ms-filter: blur(2px);
  filter: blur(2px);
}

---

This awesome jQuery plugin is developed by Palestinian. For more Advanced Usages, please check the demo page or visit the official website.