[英]stop closing the modal by clicking backdrop or outside the modal
I have used one angular2 ng-bootstrap modal in our code.我在我们的代码中使用了一个 angular2 ng-bootstrap模式。
I want the modal will not close when I click outside the modal.当我在模态外单击时,我希望模态不会关闭。 Currently the modal is getting closed while clicking outside.当前,在单击外部时模态正在关闭。
In angular1 I used to do this by [keyboard]="false" [backdrop]="'static'".在 angular1 中,我曾经通过 [keyboard]="false" [backdrop]="'static'" 来做到这一点。 But this is time it is not working in angular2.但现在是它在 angular2 中不起作用的时候了。
My Open method is as follows:我的打开方法如下:
open() {
const modalRef = this.modalService.open(NgbdModalContent);
modalRef.componentInstance.name = 'World';
}
As per the answer of @anshuVersatile, I understand we need to use some modal options.根据@anshuVersatile 的回答,我知道我们需要使用一些模态选项。
Then I create a object of NgbModalOptions and pass it as second parameter of my open method and it works.然后我创建一个NgbModalOptions对象并将它作为我的 open 方法的第二个参数传递,它可以工作。
Code is as follows :代码如下:
let ngbModalOptions: NgbModalOptions = {
backdrop : 'static',
keyboard : false
};
console.log(ngbModalOptions);
const modalRef = this.modalService.open(NgbdModalContent, ngbModalOptions);
Though it is late still it might be helpful for somebody else facing the issue:虽然现在已经晚了,但它可能对面临问题的其他人有所帮助:
const config: ModalOptions = {
backdrop: 'static',
keyboard: false,
animated: true,
ignoreBackdropClick: true,
initialState: {
data1: 'new-user',
username: 'test'
}
};
this.bsModalRef = this.modalService.show(MyComponent, config);
initialState object is used to pass data to modal. initialState 对象用于向模态传递数据。
$modal.open({
// ... other options
backdrop : 'static',
keyboard : false
});
While you creating your modal you can specify its behavior:在创建模态时,您可以指定其行为:
In case of ngx-bootstrap/modal in angular 2+ (bsmodal) use [config]="{ backdrop: 'static' }", .ts file like如果 ngx-bootstrap/modal in angular 2+ (bsmodal) 使用 [config]="{ background: 'static' }", .ts file like
import {ModalDirective} from 'ngx-bootstrap/modal';
@ViewChild('myModal') public myModal: ModalDirective;
openpopup(){
this.myModal.show()
}
and .html like和 .html 之类的
<button class="btn btn-md btn-pill btn-success mb-3 pull-right" type="button" data-toggle="modal" (click)="openpopup()">Open</button>
<div bsModal #myModal="bs-modal" class="modal fade" [config]="{ backdrop: 'static' }" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Popup heading</h4>
<button type="button" class="close" (click)="myModal.hide()" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!---- popup content here---->
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
In your component.ts file在你的 component.ts 文件中
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
import { ViewChild, TemplateRef } from '@angular/core';
//--------
constructor(
private modalService: BsModalService
) {}
@ViewChild('sampleModal', {static: true}) sampleModalRef: TemplateRef<any>;
modalRef: BsModalRef;
config = {
backdrop: true,
ignoreBackdropClick: true
};
//-------
open() {
this.modalRef = this.modalService.show(this.sampleModalRef, this.config);
}
HTML HTML
<ng-template #sampleModal>
.
.
.
.
</ng-template>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.