Adding buttons in the dialog's header part?

Question

I want to add two buttons in the dialog's header part along with the 'x' icon, but I can only add the buttons at the bottom of it, even after searching for hours, I didn't get any solution of adding them at the top or changing their position from bottom to top. Please help me out.

$(function(){
   var winsize = ["width=400,height=500"];
   var newwin = function() {
      window.open("http://www.google.com", "New Window", winsize);
      $(this).dialog("close");
   }
   var hide = function() {}
   var btns = {
       buttons: {
         "+": newwin,
         "-": hide
      }
   };
   $( "#dialog" ).dialog(btns);
});

Please add this to the original question so it's easier to read and help out. — Björn
– Björn, Commented Jun 24, 2011 at 17:43
There is nothing dialogOpts, I typed it by mistake, I've called the var btns in dialog. — Piyush Aggarwal
– Piyush Aggarwal, Commented Jun 24, 2011 at 18:31

Homer · Accepted Answer · 2014-07-29 19:45:07Z

3

It's ugly, but maybe a kick in the right direction...

http://jsfiddle.net/AjKFe/48/

//create dialog
$("#dialog2").dialog({
    height: 140,
    modal: true,
    autoOpen: false
});

//add a button
$("<a href='#' style='float:right; margin-right:1em;'></a>").button({icons:{primary: "ui-icon-plus"},text: false}).insertBefore('.ui-dialog-titlebar-close').click(function(e){
   e.preventDefault();
   alert("click");
});

edited Jul 29, 2014 at 19:45

answered Jun 24, 2011 at 20:17

Homer

7,91014 gold badges75 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Piyush Aggarwal Over a year ago

Thanks a ton, this is exactly what I've been looking for, you are really great :)

Homer Over a year ago

If it's the answer you're looking for, why not mark it as the answer?

Patricia · Accepted Answer · 2011-06-24 17:41:22Z

0

I've worked around this by putting regular buttons in the title of my dialog. of course, you have to wire them up manually and such, so it's not an simple solution.

answered Jun 24, 2011 at 17:41

Patricia

7,8024 gold badges40 silver badges70 bronze badges

Comments

dae.eklen · Accepted Answer · 2012-06-27 18:01:39Z

0

You could also do the following:

    var titlebar = dialog.parents('.ui-dialog').find('.ui-dialog-titlebar');
    $('<button>-</button>')
        .appendTo(titlebar)
        .click(function() {
            // smth here
    });         
    $('<button>+</button>')
        .appendTo(titlebar)
        .click(function() {
            //smth here
    });

or use jQuery icons by replacing "-" and "+" by

<span class="ui-icon ui-icon-minusthick">minimize</span>

answered Jun 27, 2012 at 18:01

dae.eklen

6245 silver badges6 bronze badges

Collectives™ on Stack Overflow

Adding buttons in the dialog's header part?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related