Added jQuery UI dialog dialog

Question

Is there a way to add content between two buttons for the jQuery UI dialog box? In the code below, I would like to have an OR between two buttons. Is it possible?

 $("#dialog-delivery").dialog({ bgiframe: true, resizable: true, height:350, width:400, modal: true, buttons: { "Continue": function() { $(this).dialog( "close" ); $(".option-separate").hide(); $("#nonsubscribers").hide(); $('<div class="radio-alert">Thank you for your selection</div>').appendTo('#subscribers'); $("#change-subs").css('visibility','visible'); }, "Change to Non-Subscriber": function() { $(this).dialog( "close" ); $("#subscribers").hide(); $(".option-separate").hide(); $("#nonsubscribers").show(); $("#change-nonsubs").css('visibility','visible'); } } }); 

Answer 1

Hack a little, but look at this demo →

The corresponding addition is the dialog open handler:

 open: function() { $('.ui-button-text:contains("Continue")') .parent() .after('<div class="button-divider">OR</div>'); } 

What it is: Select the ui button with specific text and insert a <div> after it. The class is important because you need at least one CSS style to properly position the seperator. Here are the styles I used:

 .button-divider { margin: .5em .2em .5em 0; float: right; padding: .2em 0 .3em 0; width: auto; } 

The important part of float:right; , because the ui buttons are floating, so your separator must also float to fit correctly.