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'来解决此问题，但由于代码仅将对话框div附加到主体而不是整个本机元素，因此引发了另一个错误。这是我的工作似乎可以解决的问题。

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

第73行从以下位置更改：document.body.appendChild（this.container）; 到：document.body.appendChild（this.el.nativeElement）;

确保您使用appendTo ='body'

干杯。

Answer 2

到目前为止，由于缺少更好的答案，这就是我现在要解决的问题：

  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 3

我也遇到过同样的问题。我发现我们使用了多个ConfirmDialog的根本原因。示例：使用有角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 4

我通过将position:fixed添加到确认对话框中来解决此问题，如下所示：

appendTo="body"

PrimeNG确认对话框无法单击，锁定屏幕

4 个答案: