[英]Disable click event outside of bootstrap modal area to close modal in angular 4
I am new in anguar4.我是anguar4的新手。 I am using bootstrap modal in my project.
我在我的项目中使用引导模式。 Modal is going to hide when click on outside of modal.
当在模态之外单击时,模态将隐藏。 here is my code
这是我的代码
//in html //在html中
<div bsModal #noticeModal="bs-modal" class="modal fade" tabindex="-1" role="dialog"
aria-labelledby="myLargeModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-md">
<div class="modal-content">
Hello World
</div>
</div>
</div>
// in ts code // 在 ts 代码中
@ViewChild('noticeModal') public noticeModal: ModalDirective;
ngAfterViewInit() {
this.noticeModal.show();
};
please add this config's in html.请在 html 中添加此配置。 Hope it will help your problem.
希望它能帮助您解决问题。
<div bsModal #noticeModal="bs-modal" class="modal fade" tabindex="-1" role="dialog"
[config]="{backdrop: 'static', keyboard: false}"
aria-labelledby="myLargeModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-md">
<div class="modal-content">
Hello World
</div>
</div>
</div>
Below solution work for me by adding {backdrop: 'static', keyboard: false};
when call the modal --> $('#myModal').modal({backdrop: 'static', keyboard: false});
下面的解决方案通过添加
{backdrop: 'static', keyboard: false};
当调用模态时 --> $('#myModal').modal({backdrop: 'static', keyboard: false});
It work for me without adding bsModal
into <div>
or any directive modules.它对我
bsModal
,无需将bsModal
添加到<div>
或任何指令模块中。
A clearer solution as shown below: HTML:更清晰的解决方案如下图: HTML:
<div #crudModal class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal Title</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
In .ts在 .ts
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
@ViewChild('crudModal') crudModal: ElementRef;
openModal() {
$(this.crudModal.nativeElement).modal({backdrop: 'static', keyboard: false});
}
Hope it helps.希望能帮助到你。
btw , if you'll use the component approach for bsModal via BsModalService , you can simply set : ignoreBackdropClick = false
(Ignore the backdrop click) as it described in the Angular Bootstrap API reference顺便说一句,如果您将通过BsModalService为 bsModal 使用组件方法,您可以简单地设置:
ignoreBackdropClick = false
(忽略背景点击),如Angular Bootstrap API 参考中所述
your.component.ts你的.component.ts
constructor(private bsModalService: BsModalService) {}
const bsModal = this.bsModalService.show(YourModalComponent, {
class: 'modal-dialog-centered modal-md',
ignoreBackdropClick: true
});
PS It is better to use this approach than inside of your HTML template. PS 最好使用这种方法而不是在 HTML 模板中使用。 Think about reusability ;)
考虑可重用性;)
If you are using button to open popup, then use below config on button,如果您使用按钮打开弹出窗口,请在按钮上使用以下配置,
<button data-target="#myModal" data-toggle="modal"
data-backdrop="static"
data-keyboard="false">
使用backdrop: 'static'
选项,在列出的文档中这里
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.