I followed this tutorial for pop up modal in angular4:
http://jasonwatmore.com/post/2017/01/24/angular-2-custom-modal-window-dialog-box
If I click outside of the modal, the modal disappears. But I do not want the modal to disappear until user clicks the close icon.
Here is the modal's OnInit
:
ngOnInit(): void {
let modal = this;
// ensure id attribute exists
if (!this.id) {
console.error('modal must have an id');
return;
}
// move element to bottom of page (just before </body>) so it can be displayed above everything else
this.element.appendTo('body');
// close modal on background click
this.element.on('click', function (e: any) {
var target = $(e.target);
if (!target.closest('.modal-body').length) {
modal.close();
}
});
// add self (this modal instance) to the modal service so it's accessible from controllers
this.modalService.add(this);
}
Here is the plunker of what I have actually: https://plnkr.co/edit/gPCTvV?p=preview
Just remove this from the app/_directives/modal.component.ts
// close modal on background click
this.element.on('click', function (e: any) {
var target = $(e.target);
if (!target.closest('.modal-body').length) {
modal.close();
}
});
Updated Plunker LINK
Update
You can make use of material dialogue or make use of bootstrap modal.
For material dialogue live example check this working link and click on contact.
Also you can check this angular materail link
For your purpose where you don't want the modal to be closed when clicked outside check out this plunker .
to use bootstrap modal check this answer it has a working demo too
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.