jquery customizing dialog buttons

Question

I am using jquery dialog with query ui 1.8.7.custom.min.js

I need to customize the buttons on the the dialog and the location where they show up on the dialog. I was able for the most part to customize my dialog box but customizing buttons and its location had been tough cookie so far. Please find screen shots and code below

HTML:

<style>
.ui-dialog, .ui-dialog-content {
 border:1px solid #cde68c;
 border-bottom:0px;
 background-color: white !important;
 color: #333;
 font: 12px/180% Arial, Helvetica, sans-serif;
}
.ui-dialog-titlebar {
 display:none;
}
#ui-dialog-title-dialog {
 color: yellow !important;
 text-shadow: none;
}
.ui-dialog-buttonpane {
 border:1px solid #cde68c;
 border-top:0px;
 margin-bottom: 1%;
}

</style>
        <div id="dialog">
            <p><span id="emailNotice"></span></p>
        </div>

Javascript:

$j(document).ready(function() {

    $j('#dialog').dialog('open');
    $j('#emailNotice').html('show some notice text abcd');  

    $j('#dialog').dialog({
        modal:true,
        autoOpen: false,
        width: 600,
        buttons: {
            "Ok": function() {
                $j(this).dialog("close");
            },
            "Cancel": function() {
                className: 'cancelButtonClass',
                $j(this).dialog("close");
            }
        }
    });
});

I want to be able to position buttons left , right , top / bottom etc

Answer 1

This might not be what you are seeking, but I have fully given up trying to configure the JQuery UI dialog buttons. They are a hot mess to work with.

So I end up using my own custom HTML fragments where I can style a button any way I please using normal HTML and CSS. Buttons float:left, some float:right. I can use Font Awesome to put fantastic looking icons on the buttons, etc.

It takes a little bit of doing, but not nearly so much as pulling out your last remaining hair trying to finagle JQuery UI dialog.

Basically, it's done in 3 steps:

1. Configure the dialog.
   Basically a straight-forward $( "selector" ).dialog( ... );

2. Load up an HTML fragment.
   I have a folder of "html fragments" where I create either a few lines or complex forms. Then at runtime I use $.get() to load those fragments and do a $( "dialog" ).parent.append( fragment );

3. Find the button(s) and configure them.
   After it has been appended to the parent, find each button you need to configure: $( "button1" ).button( ... ).click( ... );

    $( "#dialog" ).dialog( ... );
   
    // -------------------------------------    
    // Get the button fragment and append to the dialog
    $.get
    (
        "/path/to/fragment/buttons.frag.html"
        , function( frag )
        {
            // Fragment appended to the dialog's parent.
            $( "#dialog" ).parent().append( frag );
   
            // Config the button
            $( "#button1" ).button().click
            (
                function()
                {
                    // do something here
                }
            );
        }
    );
   

Answer 2

Find in jquery-ui-1.10.0.custom.css the class bellow and remove float: right;

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
float: right;
}

Tested in jquery-ui-1.10.0.custom.css not in jquery-ui-1.8.7.custom.css

Answer 3

    <!-- language: lang-js -->
buttons: [
       {

            text: "Delete that",
            className: 'deleteButtonClass',
            click: function() {
                alert('foobar');                
            }
        }

Answer 4

You can always pass an empty object for the buttons property. You would then add your buttons directly in your "dialog" div. Of course, this would mean you'd have to handle the button click events manually.

Rough example:

<div id="dialog">
  <p><span id="emailNotice"></span></p>
  <button id="myButton">Submit</button>
</div>

Javascript:

$j('#dialog').dialog({
    modal:true,
    autoOpen: false,
    width: 600,
    buttons: {}
    }
});