专注于时间选择器而不是模态 window

Question

我的模式 window 在 Angular

上阻止了我的时间选择器

Component.ts

  open() {
    const amazingTimePicker = this.atp.open();

    amazingTimePicker.afterClose().subscribe(time => {
      console.log(time);
    });
  }

  // Triggering the modal window
    createApplication(content) {
    this.modalService.open(content, {centered: true, size: 'lg'});
    }

模态html

  <ng-template #create let-modal>
      <div class="modal-header">
          <h4 class="modal-title" id="modal-basic-title">Job Application</h4>
          <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
              <span aria-hidden="true">&times;</span>
          </button>
      </div>
      <div class="modal-body">
          <form #createApplicationForm="ngForm" (ngSubmit)="createApplicationForm.form.valid && createForm(createApplicationForm)" >
              <div class="form-group">

                  <div class="input-group">
                      <input class="form-control" id="preferredContactDate" name="preferredContactDate"
                        [(ngModel)]="newApplicationFormDateModel" ngbDatepicker #preferredContactDate="ngbDatepicker">
                        <div class="input-group-append">

                        //Open time picker here
                            <button class="btn btn-secondary" (click)="open()"
                                type="button"></button>
                        </div>
                  </div>

                </div>
                <div class="modal-footer">
                    <!-- Submit button -->
                    <input class="btn btn-dark" type="submit" value="Create" />
                    <button type="button" class="btn btn-dark" (click)="modal.dismiss('Cross click')">Cancel</button>
                </div>
            </form>
      </div>

  </ng-template>

但是，当我这样做时，时间选择器被模态阻止。

有什么想法吗？

时间选择器的 Stackbliz - https://stackblitz.com/edit/amazing-timepicker-example

参考：https://www.npmjs.com/package/amazing-time-picker

模态：https://ng-bootstrap.github.io/#/components/modal/examples

根据回答更新：

<div class="time-picker">
  <input atp-time-picker value="19:00"/>
</div>

CSS

.time-picker {
    position:absolute;
    z-index : 99999999;
  }

  .my-custom-class{
    z-index: 900;
}

我也试过内联样式

<input style= "z-index: 99999999;" atp-time-picker value="19:00"/>

Answer 1

您可以为模式指定自定义 class 以覆盖 z-index。

示例：

在你的 js/ts:

this.modalService.open(content, {backdropClass: 'my-custom-class'});

css:

.my-custom-class{
z-index: 900;
}

Answer 2

您的问题与此处提到的问题类似：https://github.com/owsolutions/amazing-time-picker/issues/129

正如 think win win 解释的那样，建议的解决方案是增加时间选择器的 z-index ：

time-picker {
  position:absolute;
  z-index : 99999999;
}

Answer 3

我们需要动态获取 bootstrap 的 z-index 并用任意数字递增它并设置为时间纠察队，如下所示：

$(document).on('show.bs.modal', '.modal', function (event) {
      const zIndex = 1045 + (10 * $('.modal:visible').length);
      // this zIndex can be assigned to the time-picker
      $(this).css('z-index', zIndex);
      setTimeout(function () {
        $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
      }, 0);
    });

专注于时间选择器而不是模态 window

Focus on timepicker instead of modal window

html

timepicker

typescript

angular