[英]angular 2: prevent user to click outside the modal dialog
I want to prevent from the user to click outside the modal dialog and he only can press on the button to exit from the dialog. 我想阻止用户在模态对话框外单击,他只能按下按钮退出对话框。 how can I do that? 我怎样才能做到这一点?
dialog.component.ts dialog.component.ts
ngOnInit() {
const dialogRef = this.dialog.open(DialogResultComponent);
dialogRef.afterClosed().subscribe(result => {
console.log(result);
});
} }
dialog-result.component.ts 对话框的result.component.ts
import { Component, OnInit } from '@angular/core';
import { MdDialog, MdDialogRef } from '@angular/material';
import { FormGroup,FormControl,Validators,FormBuilder, } from '@angular/forms';
@Component({
selector: 'app-dialog-result',
templateUrl: './dialog-result.component.html',
})
export class DialogResultComponent {
form: FormGroup;
name = new FormControl('',Validators.required);
width = new FormControl('',Validators.required);
height = new FormControl('',Validators.required);
constructor(public dialogRef: MdDialogRef<DialogResultComponent>,private fb: FormBuilder) {
}
ngOnInit() {
this.form = this.fb.group({
'name' :this.name,
'width': this.width,
'height': this.height,
});
}
saveData(){
console.log(this.name.value);
this.dialogRef.close({name:this.name.value,width:this.width.value,height:this.height.value});
}
}
what I tried to do is: dialog-result.component.html 我试图做的是: dialog-result.component.html
<div>
<form [formGroup]="form">
<h3>MineSweeperwix</h3>
<div class="mdl-dialog__content">
<p><mdl-textfield type="text" label="name" ([ngModel])="name" floating-label autofocus></mdl-textfield></p>
<mdl-textfield type="number" formControlName="width" label="width" floating-label autofocus></mdl-textfield>
<mdl-textfield type="number" formControlName="height" label="height" floating-label autofocus error-msg="'Please provide a correct email!'"></mdl-textfield>
</div>
<div class="mdl-dialog__actions">
<button mdl-button (click)="saveData()" mdl-button-type="raised" mdl-colored="primary" mdl-ripple [disabled]="!form.valid">Save</button>
<button mdl-button (click)="dialogRef.close(dd)" mdl-button-type="raised" mdl-ripple>Cancel</button>
</div>
</form>
</div>
dialog-result.component.cs 对话框的result.component.cs
div.modal-backdrop {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 100; /* less than your dialog but greater than the rest of your app */
/* optional: */
background: black;
opacity: 0.2;
}
You're using the Material Design dialog, which has an option to add a backdrop and prevent closing. 您正在使用“材质设计”对话框,该对话框可以选择添加背景并防止关闭。
I think you need to do something like this: 我想你需要做这样的事情:
this.dialogRef = this.dialog.open(DialogResultComponent, {
disableClose: true,
hasBackdrop: true // or false, depending on what you want
});
See the demo at https://github.com/angular/material2/blob/master/src/demo-app/dialog/dialog-demo.ts . 请参阅https://github.com/angular/material2/blob/master/src/demo-app/dialog/dialog-demo.ts上的演示。
Because the documentation is not yet ready, I've found it invaluable to look at their demo app, which is included in the source. 由于文档还没有准备好,我发现看看他们的演示应用程序是非常宝贵的,它包含在源代码中。 You can run it locally with: 您可以在本地运行它:
npm run demo-app
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.