如果用户在弹出窗口旁边单击，Angular4弹出窗口会关闭吗？

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

Answer 1

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