jQuery UI: Dialog with no Titlebar

by swaptoy

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 no Titlebar</h2>

<div id="dialog" style="display:none">
  <p>This is the default dialog which is useful for displaying information. Notice that the titlebar has been removed.</p>
</div>

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

CSS

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

JavaScript

var theButton = document.getElementById("openDialog");
theButton.onclick = deleteApplicationDialog;

function deleteApplicationDialog() {
    var opts = {
     //   height: 'auto',
        width: 350,
        position: 'center',
        modal: true,
   //     draggable: false,
        buttons: {}
    };
    
    var modal = $("#dialog");
	// Create a dialog.
   modal.dialog(opts);
    modal.dialog({modal: true});
    
    modal.show();
    modal.dialog("open");
};