Adding buttons

The button option accepts an object literal that is used to specify the different <button> elements that should be present on the dialog. Each property: value pair represents a single button. Let's add a couple of <button> elements to our dialog.

Modify the final <script> element in dialog5.html so that it appears as follows:

<script>
  $(document).ready(function($){
    $("#myDialog").dialog({
      buttons: { Ok: function() { }, Cancel: function() { } },
      draggable: false
    });
  });
</script>

Save the file as dialog6.html. The key for each property in the buttons object is the text that will form the <button> label, and the value is the name of the callback function to execute when the button is clicked. The buttons option can take either an object, as in this example, or an array of objects. In this example the execute() and cancel() functions don't do anything; we'll come back to this example shortly and populate them.

The following...