Adrian P. Adrian P. - 3 months ago 30
jQuery Question

jQuery UI dialog buttons with drop down list of actions

I have a normal jQuery dialog (as shown in the first image) and 3 possible actions and 3 buttons (as this is a confirmation for user action).

I need to add 4th button (4th possible action) which I think it is too much. So, I thought about adding a drop down button for the dialog (as shown in the second image).

Is that even possible?

Many thanks for your input.

First image:

First image

Second image:

Second image

Answer

Your idea is right. However, the z-index issue is in fact an overflow issue. To fix this:

  • Add a class to dialog so that it is easier to customize
  • Set overflow property on the dialog to a suitable value

Code and Demo:

$(function() {
  $("#dialogSuccess").dialog({
    buttons: [
      { "text": "Option 1", "class": "btn btn-primary", "click": function() { $(this).dialog("close"); } },
      { "text": "Option 2", "class": "btn btn-success", "click": function() { $(this).dialog("close"); } }
    ],
    create: function() {
      var menuHTML = "";
      menuHTML += "<div class='btn-group'>";
      menuHTML += "<button type='button' class='btn btn-default dropdown-toggle' data-toggle='dropdown'>Action <span class='caret'></span></button>";
      menuHTML += "<ul class='dropdown-menu pull-right' role='menu'>";
      menuHTML += "<li><a href='#'>Action 1</a></li>";
      menuHTML += "<li><a href='#'>Action 2</a></li>";
      menuHTML += "</ul>";
      menuHTML += "</div>";
      $(this).closest(".ui-dialog").find(".ui-dialog-buttonset").append(menuHTML);
    },
    dialogClass: "overflow-fix",
    width: "auto"
  });
});
@import url("http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");
@import url("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css");

.overflow-fix {
  overflow: visible;
}
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<!-- Note: I am not  sure what is the recommeded order of including jQuery UI and Bootstrap -->

<div id="dialogSuccess" title="Action was successful">
  <p>What do you want to do next?</p>
</div>

Screeshot:

enter image description here

Comments