Question

当在对话框内的表格内部时，选择不会打开。我包含了问题的代码段

$('select').selectmenu();
$('.RegularDialog').dialog({
  autoOpen: false,
  modal: true,
  height: 500,
  width: 570
});
$('#OpenDialog').click(function(e) {
  $('.RegularDialog').dialog('open');
});

<head>
  <link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
</head>

<body>
  <div id="Dialog" title="Edit Dialog" class="RegularDialog">
    <form action="">
      <table>
        <tr>
          <td>Select the Type</td>
          <td>
            <select id="Type">
              <option value="a">Type 1</option>
              <option value="b">Type 2</option>
              <option value="c">Type 3</option>
            </select>
          </td>
        </tr>
      </table>
    </form>
  </div>

  <button id="OpenDialog">Open Dialog</button>
</body>

Answer 1

问题是jQuery UI正在生成＆＃34;下拉＆＃34;对于页面上的选择，但这是在成为弹出窗口的div之外。然后，当显示对话框时，它会覆盖＆＃34;下拉＆＃34;。

如果您在对话框出现后移动selectmenu()来电，则说明它可以正常工作。

您的代码段已更新：

＆＃13;

$('.RegularDialog').dialog({
  autoOpen: false,
  modal: true,
  height: 500,
  width: 570
});
$('#OpenDialog').click(function(e) {
  $('.RegularDialog').dialog('open');
  $('select').selectmenu();
});

＆＃13;

<head>
  <link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
</head>

<body>
  <div id="Dialog" title="Edit Dialog" class="RegularDialog">
    <form action="">
      <table>
        <tr>
          <td>Select the Type</td>
          <td>
            <select id="Type">
              <option value="a">Type 1</option>
              <option value="b">Type 2</option>
              <option value="c">Type 3</option>
            </select>
          </td>
        </tr>
      </table>
    </form>
  </div>

  <button id="OpenDialog">Open Dialog</button>
</body>

＆＃13;

Answer 2

你也可以试试这个：

.ui-front{z-index:0 !important; } 
.ui-selectmenu-open {z-index:9999 !important;}

Answer 3

我在对话框中选择了selectmenu两个问题：

1）对话框隐藏了Selectmenu溢出。

2）在Jquery 1.10中存在重大变化，因此对话框z-index即时重新计算。单击对话框中的某个位置后，这会隐藏selectmenu下拉项目。

要解决这两个问题，你可以在body：

之前将selectmenu附加到一些空div

$('select').selectmenu({ 
   appendTo: '#someDiv'
})

其中 someDiv 是：

<body>
   ...
   <div id="somediv"></div>
</body>

并使z-index的selectmenu显着高于对话框ui-front布局。

从jqueryUI来源我发现对话框正在通过兄弟元素计算z-index（我敢打赌他们试图找到其他对话框，但使用append: 'body'强制selectmenu成为z-index顺序的另一个元素。

Answer 4

仅供记录。如果你（明智地）想要避免粗暴地覆盖ui-front的{{1}}规则，你可以做的就是

jquery-ui.css

在撰写本文时（css3），没有选择器可以在其子项的条件标准上选择父元素。所以你被jquery困住了。

    $( 'div.ui-front:has("ul[id^=dropdown_]")').css('z-index',1005);

$(document).ready(function() {
 
    $( "select[id^=dropdown]" ).selectmenu();
    $( 'div.ui-front:has("ul[id^=dropdown_]")').css('z-index',1005);
 
});

html, body {
    height: 100%;
  }
 
  * {
    margin: 0px;
    padding: 0px;
  }
 
.ui-selectmenu-button.ui-button {
    width: 100px !important;
}
 
#low, #medium, #high {
    position:absolute;
    top:20px;
    width: 150px;
    padding:10px;
    border-style: solid;
    border-width: 1px;
    border-radius: 10px;
    box-shadow: 4px 4px 4px 0 #999;
}
 
#low::before, #medium::before, #high:before {
    display:block;
    height: 2em;
    font: 1.1em arial ;
}
 
#low::before {
    content: 'z-index: 0' ;
}
 
#low {
    z-index: 0;
    background-color: #cff;
    border-color: #8aa;
    left: 20px;
}
 
#medium::before {
    content: 'z-index: 50' ;
}
 
#medium {
    z-index: 50;
    background-color: #fcf;
    border-color: #a8a;
    left: calc(50% - 75px);
}
 
#high::before {
    content: 'z-index: 1000' ;
}
 
#high {
    z-index: 1000;
    background-color: #ffc;
    border-color: #aa8;
    right: 20px;
}

Answer 5

我知道这很老了，但是在某些情况下，接受的答案不起作用。

如果使用CSS将selectmenu z-index更改为更高的值，则即使调用了上述补救措施，选项列表也将保留在对话框后面（至少在我的情况下）。就我而言，由于应用程序冲突，需要增加所有ui对话框的z-index。

有两种方法可以解决此问题（在此示例中，所有对话框的z-index均使用CSS设置为z-index：750）：

使用JQuery：

$('#selectmenu-menu').parent().css('z-index', '751');

初始化特定选择菜单时使用CSS / Classes选项

CSS

.maxz {
    z-index: 751;
}

JavaScript

$('#selectmenu').selectmenu({
    classes: {
        "ui-selectmenu-open": "maxz"
    }
})

发生了什么事

.ui-dialog的z-index是通过CSS设置的（该数字可能因您的应用程序而异，但您可以了解if的要点）。在此示例中，我将使用750。
创建选择菜单元素时，将在无序列表中创建“选项”。该列表具有原始选择菜单的ID，并附加“ -menu”。
为了使列表位于对话框上方，您必须将列表的包装器元素的z-index至少更改为751，更改无序列表的z-index无效。
在第一个示例中，我们处理列表的包装器元素（其父级），使它比对话框高1个索引，从而到达顶部。
在第二个示例中，CSS负责解决问题本身。我们只需创建一个z-index值比设置的对话框z-index高1的CSS类，然后在selectmenu初始化中使用“ classes”选项将该类分配给“ ui-selectmenu-open” '（当单击按钮并打开菜单时，添加到ui-selectmenu-menu包装器元素中的类。）

替代＃1

在第一个示例中，必须在初始化选择菜单之后包含以上内容。

$('#menu1').selectmenu({
    *setup and functions added here*
});
$('#menu1-menu').parent().css('z-index', '751');

请注意，至少对我而言，尝试将代码包含在受影响的选择菜单的create事件中没有任何作用，必须将其单独调用，并在菜单初始化之后。

替代＃2

第二个示例更有效

您只需将.maxz的z-index值设置为所有对话框的最高z-index值+1。（不知道我会理解为什么有5个不同的对话框和5个不同的z-索引，但一切皆有可能。）

如果您需要通过此过程初始化多个选择菜单，并且所有共享菜单共享相同的事件，只需将它们按类分组并按类而不是id进行初始化，请添加上述类选项。

但是，如果您有多个选择菜单，每个菜单具有不同的设置属性（即类，函数等），则可以按上述方法向每个类中添加类，也可以向每个选择菜单中添加类，例如“ s-max-z”，然后在所有已初始化的之后执行以下操作：

$('.s-max-z').selectmenu("option", "classes.ui-selectmenu-open", "maxz");

注释：

初始化对话框窗口小部件时使用classes选项（使用modal：true时）将z-index恢复为默认值，然后使用接受的答案几乎可以正常工作。选择菜单的Z索引已正确重置，并在对话框上方打开，问题是您无法进入对话框执行任何操作！

CSS

.minz {
    z-index: initial;
}

JavaScript

$('#dialog').dialog({
    modal: true,
    classes: {
        "ui-dialog": "minz"
    }
})

发生的事情是，在小部件叠加层后面打开了对话框，该对话框仍然最初为CSS中的对话框设置了原始的z-index-1（在我的情况下为749）。

由于窗口小部件覆盖层创建一次并附加到正文的末尾，因此，如果没有大量额外的CSS / JavaScript来为每个出现的对话框不断重置窗口小部件覆盖层的z-index，就不可能了。

即使只有一个对话框，也必须单独设置小部件的CSS（我在对话框的类中尝试了CSS，没有任何影响）。

Answer 6

select会在对话框中显示一个显示：none。所以我在它上面做了内联样式。

我希望这是你所期望的。

＆＃13;

  $('select').selectmenu();
  $('.RegularDialog').dialog({
    autoOpen: false,
    modal: true,
    height: 500,
    width: 570
  });
  $('#OpenDialog').click(function(e) {
    $('.RegularDialog').dialog('open');
  });

＆＃13;

<head>
  <link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
</head>

<body>
  <div id="Dialog" title="Edit Dialog" class="RegularDialog">
    <form action="">
      <table>
        <tr>
          <td>Select the Type</td>
          <td>
            <select style="display:inline-block !important;vertical-align:top;" id="Type">
              <option value="a">Type 1</option>
              <option value="b">Type 2</option>
              <option value="c">Type 3</option>
            </select>
          </td>
        </tr>
      </table>
    </form>
  </div>

  <button id="OpenDialog">Open Dialog</button>

</body>

＆＃13;

Jquery UI selectmenu无法在对话框中工作

6 个答案: