.no-close .ui-dialog-titlebar-close { display: none; }
Notes:
The Close button is actually the 'x' in the top-right corner of a dialog box.
.ui-button .ui-widget .ui-state-default .ui-corner-all .ui-button-text-only { font-weight: bold; // Does not work. }
Step 1: Declare the button (CGI form field in HTML):
<span id="delete_person_button">Delete</span>
Step 2: Turn that into a jQuery button (Javascript):
$(document).ready(function() { $("#delete_person_button").button(); ... }
Or, turn several buttons into jQuery buttons in 1 hit (Javascript):
$(document).ready(function() { $("#update_person_button, #delete_person_button").button(); ... }
Step 3: Attach a click handler to the button (Javascript):
$(document).ready(function() { $("#delete_person_button").click(function(e) { $("#confirm_delete").dialog ({ buttons: { Yes: function() { delete_person(); $(this).dialog("close"); }, No: function() { $(this).dialog("close"); } }, dialogClass: "no-close", modal: true }); }); ... }
Notes:
I just happened to want a modal dialog box. If you chop that line, *don't forget* to remove the trailing ',' on the previous line. Yep - that's another reason to despise the idiots who designed this language. They inflict gratuitous pain on us for petty things (as does C, C++ and a whole heap of other, lesser, languages).
Step 1: The CSS
.button-like { font-size: 24px; font-weight: lighter; // Does not work. }
Step 2: Declare the button (CGI form field in HTML):
<span class="button-like"><input id="reset_person_button" type="reset" value="Reset"></span>
The button size changes, as per the CSS, but the font-weight doesn't.
Perhaps this only fails for reset-type buttons. I don't know. I did not try this with another type of button.
As you know, jQuery is full of astonishing and infuriating traps.
Here are some connected with dialog boxes.
Don't try to use methods such as .close(), .destroy() or .hide() to close the dialog box. They don't work. Use this construct from within each button:
$(this).dialog("close");
Yes, that's right - within *each* button.
This looks reasonable, but *will not work*:
$(document).ready(function() { $("#delete_person_button").click(function(e) { var confirm = "No"; $("#confirm_delete").dialog ({ buttons: { Yes: function() { confirm = "Yes"; $(this).dialog("close"); }, No: function() { $(this).dialog("close"); } }, dialogClass: "no-close", modal: true }); }); }
AFAICT, there is a bug in either jQuery or Javascript, in that this code declares 2 variables called 'confirm'. And therefore the assignment:
confirm = "Yes";
does not propagate to the one explicitly declared with:
var confirm = "No";
This, in turn, means you cannot put the above code in a function, and end that function with:
return confirm;
because only the first (outer) confirm will be returned, and it's value is always "No".
All tutorials (Includes references)