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

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: {}
    }
});