Question

我在项目的下拉列表中遇到了挑战。当我把它放在常规页面上时它可以正常工作。当我在模态中使用它时，内容在模态后面，无法访问。

我做了一些research，看到我的z-index出了问题。但是，我仍然无法让它工作。我给模态一个z指数为3000，并给出了下拉绝对最大z指数2147483647，下拉仍然在模态后面。

以下是相关的CSS：

/*trying to get query dropdown on top*/
.dropdown-on-top{
  /*position: absolute;*/
  z-index: 2147483647;
}

.modal-below-dropdown{
  /*position: relative;*/
  z-index: 3000;
}
/*end of tring to get query dropdown on top:*/

我正在使用下面的模型来设置模态的z-index。我正在使用dropdown-on-top让下拉线保持在模态之上。

仅供参考 - 我已经注释了两者的位置项目，因为当我启用它们时，模态根本不会显示。但是，根据我的阅读，我需要他们两个来完成这项工作。

以下是模态的HTML：

<div class="modal modal-message modal-below-dropdown fade" id="modal" style="display: none;">
  <div class="modal-dialog modal-below-dropdown">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">Create Query</h4>
      </div>
    </br>
    <form class="form-horizontal">
      <div class="form-group">
        <label class="col-md-3 control-label">Query Name</label>
        <div class="col-md-6">
          <input type="text" class="form-control" placeholder="Query Name">
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-3 control-label">Media</label>
        <div class="col-md-6">
          <div class="checkbox">
            <label>
              <input type="checkbox" value="">
              Print
            </label>
          </div>
          <div class="checkbox">
            <label>
              <input type="checkbox" value="">
              Digital
            </label>
          </div>
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-3 control-label">Type</label>
        <div class="col-md-6">
          <div class="radio">
            <label>
              <input type="radio" name="optionsRadios" value="">
              Add
            </label>
          </div>
          <div class="radio">
            <label>
              <input type="radio" name="optionsRadios" value="">
              Drop
            </label>
          </div>
        </div>
      </div>
    </form>
    <!-- <hr> -->
    <table class="table table-valign-middle m-b-0">
      <thead>
        <th class="col-md-8">Demographic</th>
        <th class="col-md-3">&nbsp;</th>
        <th class="col-md-2">Values</th>
        <th class="col-md-1">Operator</th>
        <th class="col-md-2">&nbsp;</th>
      </thead>
      <tbody>
        <tr>
          <td class="col-md-8">
            <!-- trying jquery autocomplete combo box -->
<div class="ui-widget">
  <select id="combobox" class="dropdown-on-top">
    <option value="Select one...">Select one...</option>
    <option value="Product Registration > Magazine > On File">"Product Registration > Magazine > On File"</option>
    <option value="Product Registration > Magazine > BPA Par 3B Source">"Product Registration > Magazine > BPA Par 3B Source"</option>
    <option value="Product Registration > Magazine > Promo Key">"Product Registration > Magazine > Promo Key"</option>
    <option value="Product Registration > Magazine > Record Status">"Product Registration > Magazine > Record Status"</option>
    <option value="Product Registration > Magazine > Subtype">"Product Registration > Magazine > Subtype"</option>
    <option value="Product Registration > Magazine > Verification Date">"Product Registration > Magazine > Verification Date"</option>
    <option value="Product Registration > Magazine > Activated Date">"Product Registration > Magazine > Activated Date"</option>
  </select><span <i class="fa fa-lg fa-sort-desc"></span>
</div>
<!-- end trying jquery autocomplete combo box -->
          </td>
          <td class="col-md-3">
            <select class="form-control">
              <option>Equals</option>
              <option>Not Equal To</option>
              <option>Contains</option>
              <option>Does Not Contain</option>
              <option>Is Empty</option>
              <option>Is Not Empty</option>
            </select>
          </td>
          <td class="col-md-3">
            <select class="form-control">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
          </td>
          <td class="col-md-1">
            <select class="form-control">
              <option>&nbsp;</option>
              <option>And</option>
              <option>Or</option>
            </select>
          </td>
          <td class="col-md-1">
            <td>&nbsp;</td>
          </td>
        </tr>
        <tr>
          <td class="col-md-4">
            <select class="form-control">
              <option>&nbsp;</option>
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
          </td>
          <td class="col-md-3">
            <select class="form-control">
              <option>Equals</option>
              <option>Not Equal To</option>
              <option>Contains</option>
              <option>Does Not Contain</option>
              <option>Is Empty</option>
              <option>Is Not Empty</option>
            </select>
          </td>
          <td class="col-md-3">
            <select class="form-control">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
          </td>
          <td class="col-md-1">
            <select class="form-control">
              <option>&nbsp;</option>
              <option>And</option>
              <option>Or</option>
            </select>
          </td>
          <td class="col-md-1">
            <td>&nbsp;</td>
          </td>
        </tr>
        <tr>
          <td class="col-md-4">
            <select class="form-control">
              <option>&nbsp;</option>
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
          </td>
          <td class="col-md-3">
            <select class="form-control">
              <option>Equals</option>
              <option>Not Equal To</option>
              <option>Contains</option>
              <option>Does Not Contain</option>
              <option>Is Empty</option>
              <option>Is Not Empty</option>
            </select>
          </td>
          <td class="col-md-3">
            <select class="form-control">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
          </td>
          <td class="col-md-1">
            <select class="form-control">
              <option>&nbsp;</option>
              <option>And</option>
              <option>Or</option>
            </select>
          </td>
          <td class="col-md-1">
            <td class="text-left"><i class="fa fa-lg fa-plus-circle"></i></td>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="modal-footer">
      <a href="javascript:;" class="btn btn-sm btn-primary">Save Query</a>
      <a href="javascript:;" class="btn btn-sm btn-white" data-dismiss="modal">Cancel</a>
    </div>
  </div>
</div>
</div>
<!-- End Add Query -->

非常感谢所有帮助。

Answer 1

Jquery插件隐藏原始选择<select id="combobox">并应用其他HTML标记。因此，为隐藏的CSS编写CSS不会改变一件事。

您应该使用ui-autocomplete.ui-menu作为css选择器来设置下拉列表的样式。

尝试：

.ui-autocomplete.ui-menu {
  z-index: 3001;
}

模态下方的下拉内容

1 个答案: