Question

我正准备在我的电脑屏幕上握拳。我有一个对话框，拒绝让我在屏幕底部的提交按钮上方有一个热点 - 我希望它位于最顶层。

我已确定我的主题正在加载。这在此验证：

我试过了：

this.dialogBox.open(thankYouModal, {position: {top: '0%', left: '20%'}});

我尝试过顶级的负数和正数。我得到的最好的是我可以进一步向下移动模态，因此用户必须向下滚动才能关闭它。然而，那个傻瓜不会让头发超过提交按钮

我试图将样式表放入组件中，其中包含以下内容：

div#cdk-overlay-0.cdk-overlay-container{
    position: fixed !important;
    left: 20%;
    top: 0%;
    background-color: white;
    pointer-events: auto;
}

我无法让这个东西在提交按钮上方一英寸处。如果他们帮助我弄清楚我做错了什么，我会给别人生一个孩子。

（是的，我知道我是戏剧性的，但我已经和它一起战斗并在网上搜索了3个小时;我是一个被击败的人......）

修改

这是thankYouModalComponent代码：

import {Component} from "@angular/core";
import {MdDialogRef, MdDialogConfig} from "@angular/material";

@Component({
             selector: 'thank-you-modal',
             template: `
                                <h3>Thank You for Your Submission</h3>
                                <p>Your Feedback has been Saved.</p>
                                <button md-raised-button (click)="dialogRef.close()">Close</button>

                        `,
            styles: [`
                        .md-dialog-container {
                                            position: fixed !important;
                                            left: 20%;
                                            top: 0%;
                                            background-color: white;
                                            z-index: 100000;
                    }`]
})

export class ThankYouComponent{
    constructor(public dialogRef: MdDialogRef<any>, ) {}
}

这是组件的调用方法和构造函数：

constructor(@Inject(FormBuilder) fb : FormBuilder,
                 private feedbackService: feedbackService,
                 private dialog : MdDialog){

-------<irrelevant code here>------------

}



    submitFeedback(group : FormGroup){
            const feedback = new Feedback(  group.get('nameBox').value,
                                            group.get('productBox').value,
                                            group.get('upsBox').value,
                                            group.get('downsBox').value);

            if(confirm("Is the data entered what you want to submit?")){
                this.dialog.open(ThankYouComponent, {position: {top: '0%', left:'20%'}});

    }

表单底部的结果对话框

Answer 1

您可以使用MdDialogRef的updatePosition（）方法调整对话框组件的位置。首先在对话框组件中导入此行

ubuntu@LDAP-machne:~$ ldapwhoami -H ldap://localhost -w PWD
   SASL/DIGEST-MD5 authentication started
   ldap_sasl_interactive_bind_s: Invalid credentials (49)

构造函数中的

使用此

import { MdDialog, MdDialogConfig, MdDialogRef } from '@angular/material';

然后从对话框模态组件内部随意调用此方法

constructor(public dialModalRef: MdDialogRef<any>) { }

在此处详细了解https://material.angular.io/components/component/dialog

我希望这会有所帮助：）

Answer 2

更好的方法是注入button元素并将其传递给对话框。通过这种方式，对话框具有关于如何调整/定位它（以及利用element.getBoundingClientRect()函数）的完整上下文：

// Dialog Component

import { Component, ElementRef, Inject, OnInit } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogConfig, MatDialogRef } from '@angular/material';

@Component({
  selector: 'app-dialog-component',
  templateUrl: './dialog.component.html',
  styleUrls: ['./dialog.component.scss']
})
export class MyDialogComponent implements OnInit {
  private readonly _matDialogRef: MatDialogRef<MyDialogComponent>;
  private readonly triggerElementRef: ElementRef;
  constructor(_matDialogRef: MatDialogRef<MyDialogComponent>,
              @Inject(MAT_DIALOG_DATA) data: { trigger: ElementRef }) {
    this._matDialogRef = _matDialogRef;
    this.triggerElementRef = data.trigger;
  }

  ngOnInit() {
    const matDialogConfig: MatDialogConfig = new MatDialogConfig();
    const rect = this.triggerElementRef.nativeElement.getBoundingClientRect();
    matDialogConfig.position = { left: `${rect.left}px`, top: `${rect.bottom - 50}px` };
    matDialogConfig.width = '300px';
    matDialogConfig.height = '400px';
    this._matDialogRef.updateSize(matDialogConfig.width, matDialogConfig.height);
    this._matDialogRef.updatePosition(matDialogConfig.position);
  }
  cancel(): void {
    this._matDialogRef.close(null);
  }
}


// Call the dialog

onShowDialog(evt: MouseEvent): void {
  const target = new ElementRef(evt.currentTarget);
  const dialogRef = this._matDialog.open(MyDialogComponent, {
    data: { trigger: target }
  });
  dialogRef.afterClosed().subscribe( _res => {
    console.log(_res);
  });
}

Answer 3

组件中的样式不会影响其父级。由于dialog-container是ThankYouComponent的父级，因此它不会覆盖它的位置。

作为解决方法，您可以将定位添加到全局styles.css。但是请注意，这会影响对话框的所有！

styles.css的

mat-dialog-container {
  position: fixed;
  left: 20%;
  top: 0%
  background-color: white;
  z-index: 100000;
}

Answer 4

const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '250px',
      data: { name: this.name, animal: this.animal },
      position: {
        top: '0px',
        left: '0px'
      }
    });

如何在触发按钮上方放置对话框？

4 个答案:

styles.css的