如果用戶在彈出窗口旁邊單擊，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

更新

您可以使用實質性對話或使用引導模態。

有關實時對話的示例，請檢查此工作鏈接 ，然后單擊“聯系”。

您也可以檢查此角度材料軌道

為了您的目的，當您不希望在外部單擊時關閉模態時，請檢查此柱塞 。

使用引導程序模態檢查此答案它也有一個正常的演示