如何在触发按钮上方放置一个对话框? [英] How can I position a dialog above the triggering button?

问题描述

我将在PC屏幕上挥拳.我有一个对话框，拒绝在屏幕底部的提交"按钮上方弹出一个热英寸-我希望它在顶部.

I'm about to put a fist through my PC screen. I have a dialog box that refuses to budge a hot inch above my submit button at the bottom of the screen -- I want it at the very top.

我已经确定我的主题正在加载.这在这里得到验证:

I have made sure my theme is loading. That was validated here:

我尝试过:

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

我尝试过使用负数和正数来表示顶部.我得到的最好的是，我可以将模式进一步向下移动，因此用户必须向下滚动以将其关闭.但是，该吸盘不会使头发变得比提交"按钮更

I've tried negative and positive numbers for top. The best I get is that I can shift the modal further down so the user has to scroll down to close it. However, that sucker won't budge a hair past the submit button

我试图通过以下方式将样式表放入组件中:

I've attempted to put a style sheet into the component with the following:

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

我无法让这个东西超出该提交按钮一英寸.如果他们能帮助我弄清楚我做错了什么，我会给我的第一个孩子.

I cannot get this thing to budge an inch above that submit button. I will give someone my first born child if they help me figure out what I'm doing wrong.

(是的，我知道我很出色，但是我一直在与之抗争，并在网上搜索了3个小时；我是一个被打败的人……)

(yes I know I'm dramatic, but I've fought with it and searched the web for 3 hours; I am a defeated man ... )

修改

这是ThankYouModalComponent代码:

here is the thankYouModalComponent code:

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>, ) {}
}

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

Here's the calling method and constructor for the component:

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%'}});

    }

表单底部的结果对话框

推荐答案

您可以使用MdDialogRef的updatePosition()方法调整对话框组件的位置. 首先将这一行导入您的对话框组件中

You can adjust position of dialog component using updatePosition() method of MdDialogRef. first import this line in your dialog component

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

在构造函数中使用

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

然后在对话框模态组件内部从任意位置调用此方法

then from inside dialog modal component call this method anywhere you want

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

在此处了解更多信息 https://material.angular.io/components/component/dialog

我希望这会有所帮助:)

i hope this will help :)

这篇关于如何在触发按钮上方放置一个对话框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！