如果用户在弹出窗口外单击，Angular 4 弹出窗口会关闭吗？

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

更新

您可以使用 material 对话或使用 bootstrap 模式。

对于 material 对话现场示例，检查此工作 link 并单击联系方式。

你也可以看看这个angular materail link

如果您不希望在外部单击时关闭模式，请查看此 plunker。

要使用 bootstrap 模式检查这个它也有一个工作演示

如果用户在弹出窗口外单击，Angular 4 弹出窗口会关闭吗？

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

angular2-template

angular