Dialogue Modal Settings

Basic Dialogue modal

Change title colour and no border on title
.ui-dialog > .ui-widget-header {
background: #8BC53E;
border: none;
}

Change size
$(".popup").dialog({
maxWidth:600,
maxHeight: 500,
width: 600,
height: 500,
autoOpen: false,
buttons: {
//and the rest of the code


Add buttons

buttons: {
"OK": function () {
$(this).dialog("close");
}
},

Change button panel colour
.ui-dialog-buttonpane {
background: #8BC53E;
}
Don’t show title bar

.no-title .ui-dialog-titlebar {
display: none;
}

Don’t show close button on titlebar

.ui-dialog-titlebar-close {
display: none;
}

Border Radius

.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
border-radius: 10px;
}

Content of box
.ui-widget-content {
font-size: 16px;
min-width: 360px;
text-align: left;
}

Change background
.ui-dialog,.ui-dialog,.ui-widget, .ui-widget-content, .ui-corner-all, .foo, .ui-draggable, .ui-resizable {background:yellow !important}​

Hide button area panel (and then show again if needed)
.ui-dialog .ui-dialog-buttonpane {
display: none;
}

Hide a button

$(":button:contains('Cancel')").hide();

Disable a button

$(":button:contains('OK')").attr("disabled", true);
Position the dialogue box horizontally and vertically
position: ['center-7%', 'center-12%']