I am new in 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
<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
@ViewChild('noticeModal') public noticeModal: ModalDirective;
ngAfterViewInit() {
this.noticeModal.show();
};
please add this config's in 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});
It work for me without adding bsModal
into <div>
or any directive modules.
A clearer solution as shown below: 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
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
your.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. 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'
选项,在列出的文档中这里
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.