Basic Dialogue modal
Change title colour and no border on title
|
1 2 3 4 5 6 |
.ui-dialog > .ui-widget-header { background: #8BC53E; border: none; } |
Change size
|
1 2 3 4 5 6 7 8 9 10 |
$(".popup").dialog({ maxWidth:600, maxHeight: 500, width: 600, height: 500, autoOpen: false, buttons: { //and the rest of the code |
Add buttons
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
buttons: { "OK": function () { $(this).dialog("close"); } }, //to this buttons: { "I Agree": function () { $(this).dialog("close"); }, "OK": function () { $(this).dialog("close"); } }, |
Change button panel colour
|
1 2 3 4 5 |
.ui-dialog-buttonpane { background: #8BC53E; } |
Don’t show title bar
|
1 2 3 4 5 |
.no-title .ui-dialog-titlebar { display: none; } |
Don’t show close button on titlebar
|
1 2 3 4 5 |
.ui-dialog-titlebar-close { display: none; } |
Border Radius
|
1 2 3 4 5 |
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { border-radius: 10px; } |
Content of box
|
1 2 3 4 5 6 7 |
.ui-widget-content { font-size: 16px; min-width: 360px; text-align: left; } |
Change background
|
1 2 3 |
.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)
|
1 2 3 4 5 |
.ui-dialog .ui-dialog-buttonpane { display: none; } |
Hide a button
|
1 2 3 |
$(":button:contains('Cancel')").hide(); |
Disable a button
|
1 2 3 |
$(":button:contains('OK')").attr("disabled", true); |
Position the dialogue box horizontally and vertically
|
1 2 3 |
position: ['center-7%', 'center-12%'] |
