Adrian P. Adrian P. - 1 year ago 86
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 Source

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() {
    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>";
    dialogClass: "overflow-fix",
    width: "auto"
@import url("");
@import url("");

.overflow-fix {
  overflow: visible;
<script src=""></script>
<script src=""></script>
<script src=""></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>


enter image description here