You have to learn to read up the relevant documentation
Dialog Widget[
^].
I just did a quick reference and got this:
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Dialog functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
var dialog1 = $("#dialog1");
var checkbox1 = $("#checkbox1");
dialog1.dialog({
autoOpen: false,
modal: true,
buttons: {
Save: function() {$(this).dialog("close");}
},
title: "Title here",
close : function() {checkbox1.prop('checked', false);}
});
checkbox1.click(function() {
if (checkbox1.prop("checked")) {
dialog1.dialog("open");
}
});
});
</script>
</head>
<body>
<div id="dialog1">Hello, my dialogue.</div>
<input type="checkbox" id="checkbox1">Open Dialog...
</body>
</html>