[英]prevent closing dialog on click
this is my dialog 这是我的对话
<div *ngIf="visible" class="overlay" (click)="close()">
<div role="dialog" class="overlay-content">
<div class="modal-dialog" (click)="$event.stopPropagation()">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" (click)="close()" data-dismiss="modal">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<ng-content></ng-content>
</div>
<div class="modal-footer footer-buttons">
<button type="button" class="btn btn-default" (click)="confirm()">OK</button>
<button type="button" class="btn btn-default" (click)="close()">Cancel</button>
</div>
</div>
</div>
</div>
</div>
as you might see most upper div has (click)="close()"
which forses dialog to close when clicking outside the dialog, because next div has (click)="$event.stopPropagation()"
it stops when clicking inside the dialog, but this solution is wrong. 如您可能会看到的最上面的div具有(click)="close()"
,它使对话框在对话框外单击时关闭,因为下一个div具有(click)="$event.stopPropagation()"
它在单击内部对话框时会停止对话框,但此解决方案是错误的。 The problem is that if I put any tabs inside the dialog, then changing tabs does not work because of (click)="$event.stopPropagation()
. Does anyone know better solution for this ? In other words how to close dialog clicking outside the dialog, but keep it open when clicking inside ? 问题是,如果我在对话框中放置任何选项卡,则由于(click)="$event.stopPropagation()
。更改选项卡将不起作用。有谁知道更好的解决方案吗?换句话说,如何关闭在外部单击的对话框对话框,但是在内部单击时保持打开状态?
I am guessing you are looking for a directive which will listen to the outside of the dialog clicks. 我猜您正在寻找一个指令,该指令将监听对话框单击的外部。 Here is my version: 这是我的版本:
@Directive({
selector: '[clickOutside]'
})
export class ClickOutsideDirective {
constructor(private elementRef: ElementRef) {
}
@Output()
clickOutside = new EventEmitter<Event>();
@HostListener('document:click', ['$event', '$event.target'])
onClick(event: MouseEvent, targetElement: HTMLElement): void {
if (!targetElement) {
return;
}
const clickedInside = this.elementRef.nativeElement.contains(targetElement);
if (!clickedInside) {
this.clickOutside.emit(event);
}
}
}
and use it as the following: 并按以下方式使用它:
<div *ngIf="visible" class="overlay" (clickOutside)="visible=false">
....
One options is to not nest the overlay and overlay-content. 一种选择是不嵌套叠加层和叠加层内容。
For example: 例如:
<div class="overlay"></div>
<div class="overlay-content">/* Content */</div>
css: CSS:
.overlay {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 5;
background-color: rgba(0,0,0,.6);
}
.overlay-content {
background: white;
position: fixed;
width: 50%;
height: 50%;
margin-left: 25%;
margin-top: 5%;
z-index: 10;
}
codepen: https://codepen.io/bgraham626/pen/VMZxON codepen: https ://codepen.io/bgraham626/pen/VMZxON
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.