Dialog title

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<div id="dialog-form" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

<button class="dialogButtons" data-title="some title">Button 1</button>
<button class="dialogButtons" data-title="another title">Button 2</button>

CSS

.panel {
    border: 1px solid grey;
    margin: 10px 20px;
    padding: 20px;
}

ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

JavaScript

$(function(){

     $( "#dialog-form" ).dialog({
        autoOpen: false,
        // other options...
     });

     $(".dialogButtons").click(function(){
         var title = $(this).data('title');
         $("#dialog-form").dialog('option', 'title', title);
         $("#dialog-form").dialog('open');
     });

});