简体   繁体   中英

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

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM