Skip to content
jQuery UI

Dialog

Modal window with buttons, animations, and dynamic open/close.

#dialog#widget#ui

Code

jquery-ui
<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>