jQuery UI: Dialog with the Close button hidden

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<h2>Dialog with the Close button hidden</h2>

<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. Notice that the close button has been removed.</p>
</div>

<button class="ui-button ui-widget ui-corner-all" id="openDialog">Open Dialog</button>

<div style="position: absolute;bottom: 5px;">
Read about this Fiddle at: <a href="http://jsdev.wikidot.com/howto:8" target="_blank">How To: jQuery - Dialog With the Close Button Hidden</a>
</div>

CSS

/* Hide the close button for a dialog that has the no-close class */
.no-close .ui-dialog-titlebar-close {
  display: none;
}

JavaScript

$(function() {
	// Create a dialog.
  $("#dialog").dialog({
  	dialogClass: "no-close",
    modal: true,
    buttons: [{
      text: "OK",
      click: function() {
      	// Close the dialog.
        $(this).dialog("close");
      }
    }]
  });
  
  $("#openDialog").on("click", function () {
  	// Open the dialog.
	  $("#dialog").dialog("open");
  });
});