PrimeNG 确认对话框无法点击，锁屏

Question

这段代码曾经一次可以工作，所以我想我已经被 PrimeNG 的更新所困扰，这对我来说已经破坏了一些东西。曾经可用的确认对话框现在隐藏在灰色的点击掩码后面，使屏幕上的所有内容都无法点击：

这两个对话框的 HTML 如下所示：

<p-dialog header="Save Location" [modal]="true" [(visible)]="showSaveDialog" width="350" height="190">
  <div style="height: 60px;">
    Save location as:&nbsp;
    <ks-dropdown #saveNameDropdown [(ngModel)]="selectedName" [options]="saveDialogNames" [editable]="true" [style]="{width: '200px'}"></ks-dropdown>
    <br><br><p-checkbox [(ngModel)]="makeDefault" binary="true" label="Make this the default location"></p-checkbox>
  </div>
  <p-footer>
    <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
      <button type="button" pButton icon="far fa-window-close" (click)="showSaveDialog=false" label="Cancel"></button>
      <button type="button" pButton icon="fas fa-check" (click)="doSave()" label="OK" [disabled]="!selectedName.trim()"></button>
    </div>
  </p-footer>
  <p-confirmDialog header="Same location name in use" icon="fas fa-question-circle" width="400"></p-confirmDialog>
</p-dialog>

启动确认对话框的代码如下所示：

if (_.find(this.app.locations, {name: this.selectedName })) {
  this.confirmationService.confirm({
    message: `Are you sure you want to replace the existing "${this.selectedName}"?`,
    accept: () => this.completeSave()
  });
}

我尝试将对话框的z-index 设置为高于出现的ui-dialog-mask div，但这没有帮助。

我也许可以通过在 DOM 中搜索有问题的ui-dialog-mask 来解决一些问题，但如果其他人可以看到我可能做错了什么，或者有更好的解决方案，我宁愿不这样做。

Answer 1

我已通过在确认对话框中添加appendTo="body" 解决了这个问题，如下所示：

 <p-confirmDialog header="Confirmation" icon="pi pi-exclamation-triangle" appendTo="body"></p-confirmDialog>

Answer 2

我也遇到过同样的问题。 我找到了我们使用多个 ConfirmDialog 的根本原因。
示例：使用 Angular JS
- 在文件 app.component.html 中：

<app-home></app-home>
<p-confirmDialog header="Confirmation" icon="pi pi-exclamation-triangle" width="425" global="false"></p-confirmDialog>

- 在文件 home.component.html 中：

<p-confirmDialog header="Confirmation" icon="pi pi-exclamation-triangle" width="425" global="false"></p-confirmDialog>

所以如果我们在组件文件（app.component.ts）中这样处理：

 this.confirmationService.confirm({
      header: 'Confirmation',
      message: `Are you sure?`,
      accept: () => {
       // handle except
      },
      reject: () => {
       // handle reject
      }
 });

这段代码会触发上面的两个ConfirmDialogs

解决方案：

删除一分为二的ConfirmDialog。内部组件的 ConfirmDialog 更好。 （在我的例子中： home.component.html 的 ConfirmDialog 应该被删除。）

Answer 3

由于到目前为止还没有更好的答案，这就是我现在要做的：

  setTimeout(() => {
    const masks = document.getElementsByClassName('ui-dialog-mask');

    if (masks && masks.length > 0)
      (masks[masks.length - 1] as HTMLElement).style.zIndex = 'auto';
  });

这会在上面的this.confirmationService.confirm(... 之后执行。这不是一个完美的解决方案，因为它没有在底部对话框和顶部对话框之间放置一个遮罩，它只是导致两个对话框都显示出来，而这两个对话框下方的所有其他内容都被遮住了。

不过，这比锁定应用要好得多。

更新：一个新的解决方案，基于 user860214 的回答，代码添加到我的项目app.module.ts 文件的底部：

// TODO: Hack to be removed when bug is fixed in PrimeNG.
import { ConfirmDialog } from 'primeng/confirmdialog';

ConfirmDialog.prototype.appendContainer = function(): void {
  if (this.appendTo) {
    if (this.appendTo === 'body')
      document.body.appendChild(this.el.nativeElement);
    else
      this.domHandler.appendChild(this.container, this.appendTo);
  }
};

Answer 4

我认为这是启动对话框/确认对话框中的错误。有些人建议使用 appendTo = 'body' 来解决这个问题，但是这引发了另一个错误，因为代码只将对话框 div 附加到正文而不是整个本机元素。这是我的工作，似乎可行。

转到 ClientApp/node_modules/primeng/components/confirmdialog/confirmdialog.js

第 73 行将其更改为：document.body.appendChild(this.container); to：document.body.appendChild(this.el.nativeElement);

确保使用 appendTo='body'

干杯。