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

<强>更新

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

对于素材对话实时示例，请检查此工作link并点击联系人。

您也可以查看angular materail link

出于您的目的，您不希望在外部点击时关闭模态，请查看此plunker。

使用bootstrap模态检查此answer它还有一个可用的演示

如果用户在弹出窗口中单击，Angular4弹出窗口将关闭？

1 个答案: