0

我已经尝试过这个-> Bootstrap Modal 中的 Angular Material Dropdown， 但它对我不起作用。我在 md 引导程序中使用 Angular 选择。问题是下拉选项出现在模式后面。我的代码如下所示：

<button type="button" mat-button data-toggle="modal" style="background: #dc6254 !important;" style="margin-top: -1px;"  data-target="#basicExampleModal">
      Select


<div class="modal fade" id="basicExampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title" id="exampleModalLabel">Fill the following</h5>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <div class="overlay-content">
        <mat-form-field> 
            <mat-select name="status" ngModel  placeholder="Status">
              <mat-option value="Accepted">
                Accepted
              </mat-option>
              <mat-option value="Rejected">
                Rejected
              </mat-option>
              <mat-option value="hold">
                Hold
              </mat-option>
               <mat-option value="West">
                In Process
              </mat-option>
            </mat-select>
          </mat-form-field>
          </div>



    </div>
    <div class="modal-footer">
      <button type="button" mat-button data-dismiss="modal" style="outline:none;">Close</button>
      <button type="button " mat-button style="outline:none;" >Save changes</button>
    </div>
  </div>
</div>

4

1 回答 1

1

我也遇到过同样的问题并尝试过，但没有奏效。我尝试在styles.css 中添加这些行，它对我有用。

.cdk-global-overlay-wrapper {
  z-index: 1000;
}

.cdk-overlay-container { z-index:2000; }
于 2019-12-06T10:16:50.373 回答