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

Question

我按照本教程在angular4中弹出模态：

http://jasonwatmore.com/post/2017/01/24/angular-2-custom-modal-window-dialog-box

如果我单击模态之外，则模态消失。 但是我不希望模式消失，直到用户单击关闭图标。

这是模态的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);
    }

这是我实际拥有的东西： https ://plnkr.co/edit/gPCTvV?p=preview

Answer 1

只需将其从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();
        }
    });

更新了Plunker LINK

更新

您可以使用实质性对话或使用引导模态。

有关实时对话的示例，请检查此工作链接 ，然后单击“联系”。

您也可以检查此角度材料轨道

为了您的目的，当您不希望在外部单击时关闭模态时，请检查此柱塞 。

使用引导程序模态检查此答案它也有一个正常的演示