Dialog

Code

<div id="dialog" title="Confirm action">
  <p>Are you sure you want to continue?</p>
</div>

<button id="opener">Open dialog</button>

<script>
$("#dialog").dialog({
  autoOpen: false,
  modal: true,
  width: 400,
  height: "auto",
  buttons: {
    "Confirm": function() {
      $(this).dialog("close");
      alert("Confirmed!");
    },
    "Cancel": function() {
      $(this).dialog("close");
    }
  },
  draggable: true,
  resizable: false,
  show: { effect: "fade", duration: 200 },
  hide: { effect: "explode", duration: 300 }
});

$("#opener").on("click", function() {
  $("#dialog").dialog("open");
});
</script>

Explanation

Wraps a div into a draggable, modal window with a button bar; autoOpen:false lets you trigger it on demand with dialog('open'). The modal overlay blocks page interaction, while show/hide effects add polish. Buttons are passed as a label-handler map and close the dialog via dialog('close').

More jQuery UI Snippets