Question

I want to add some custom HTML between the buttons on a jQuery dialog box (specifically a span that contains the word “or”).

The Javascript I have is something like this:

$("#foo").dialog({
    autoOpen: false,
    width: 600,
    modal: true,
    resizable: false,
    buttons: {
        save: { text: 'Save', class: 'form-finish form-submit', click: function() {
                …
            }
        },
        cancel: { text: 'Cancel', class: 'form-cancel', click: function() {
            $( this ).dialog( "close" );
            }
        }
    }
});

The HTML it produces is this:

<button class="form-finish form-submit ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" role="button" aria-disabled="false"><span class="ui-button-text">Save</span></button>
<button class="close cancel ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" role="button" aria-disabled="false"><span class="ui-button-text">Cancel</span></button>

What I want is this:

<button class="form-finish form-submit ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" role="button" aria-disabled="false"><span class="ui-button-text">Save</span></button>
<span class="article">or</span>
<button class="close cancel ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" role="button" aria-disabled="false"><span class="ui-button-text">Cancel</span></button>

Is there any way to do this without hacking jQuery UI’s core? Thanks!

Answer 1

Do something like this after you create dialog?

  $(".form-finish").after("<span class='article'>or</span>");