Popup

Code

<!-- Trigger -->
<a href="#popup1" data-rel="popup" class="ui-btn">Open Popup</a>

<!-- Simple popup -->
<div data-role="popup" id="popup1" class="ui-content" data-theme="b">
  <p>This is a popup.</p>
  <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow">Close</a>
</div>

<!-- Dialog-style popup -->
<div data-role="popup" id="dialog1"
     data-dismissible="false" data-overlay-theme="b">
  <div data-role="header"><h1>Confirm</h1></div>
  <div role="main" class="ui-content">
    <p>Are you sure?</p>
    <a href="#" class="ui-btn ui-btn-b ui-btn-inline" data-rel="back">Yes</a>
    <a href="#" class="ui-btn ui-btn-inline" data-rel="back">No</a>
  </div>
</div>

<!-- Position: window (center) or relative to a selector -->
<a href="#popup2" data-rel="popup" data-position-to="window">Center</a>
<a href="#popup2" data-rel="popup" data-position-to="#target">At #target</a>

<!-- Open programmatically -->
<button id="open-btn">Open via JS</button>
<script>
$("#popup1").popup({ history: false });
$("#open-btn").on("click", function() {
  $("#popup1").popup("open", { x: 100, y: 200, transition: "pop" });
});
</script>

Explanation

data-rel=popup on an anchor opens the matching div[data-role=popup] as an overlay; data-rel=back closes it. data-position-to controls placement (window centers it, or a selector anchors it to an element). data-dismissible=false forces the user to use a button, and the popup() method exposes open/close for programmatic control with x/y coordinates.

More jQuery Mobile Snippets