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

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()方法调整对话框组件的位置.首先在对话框组件中导入此行

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

在构造函数中使用它

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

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

 changePosition() {
        this.dialModalRef.updatePosition({ top: '50px', left: '50px' });
    }

在这里阅读更多相关信息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

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

Answer 4

您的组件的样式不会影响其父组件。由于对话框容器是ThankYouComponent 的父容器，因此它不会覆盖其位置。

\n\n

作为解决方法，您可以将定位添加到您的全局styles.css.

\n\n

\xe2\x9a\xa0\xef\xb8\x8f 但请注意，这会影响所有对话框！\xe2\x9a\xa0\xef\xb8\x8f

\n\n

样式.css

\n\n

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

\n