Angular4 pop up is closing if user click out side the pop up?

Question

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

Using JQuery inside angular for such a thing is not a good practice, I wouldn't recommend this tutorial :/ — Supamiu, Aug 10 '17 at 06:07
Supamiu I am new to angular, can you please tell me why it's not a good practice to use jquey inside angular — Rahiman, Aug 10 '17 at 06:12
Because JQuery does what angular can already do, and in a better way. — Supamiu, Aug 10 '17 at 06:20

Rahul Singh · Accepted Answer · 2017-08-10T06:33:03.113

0

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

edited Aug 10 '17 at 06:33

answered Aug 10 '17 at 06:05

Rahul Singh

19,030
11
64
86

Thanks, you really save my time – Rahiman Aug 10 '17 at 06:11
Is there any better solution without using jquery – Rahiman Aug 10 '17 at 06:24
No, I do n't want use use material, I am using bootstrap3+ angular4 – Rahiman Aug 10 '17 at 06:32

Angular4 pop up is closing if user click out side the pop up?

1 Answers1