Проблема со стилем и видимостью при отображении модального режима в приложении Angular 4 -

Question

Возникла проблема с открытием и отображением модального режима в моем приложении Angular4 .NET. Я бы щелкнул по ссылке и последовательно показал бы модал. В моем случае ссылка на дату для номера счета-фактуры [см. Изображение].

Я следовал подходу, показанному здесь - http://jasonwatmore.com/post/2017/01/24/angular-2-custom-modal-window-dialog-box

Теперь у меня непрозрачный экран, блокирующий фон, но модальное изображение не отображается так, как я надеялся. Как это

Я не знаю, почему модал не появился. Я предполагаю, что проблема z-индекса может быть? Потому что я не вижу никаких ошибок консоли. Так что, вероятно, не угловой вопрос, связанный с кодом. Скорее всего, CSS это то, что я чувствую. Как вы можете видеть, основной экран моего приложения разделен на 2 сегмента: содержимое тела col-sm-3 и col-sm-9.

По сути, это то, что я написал для проверки своего кода. мой основной макет окна приложения -

    <div class='container-fluid'>
    <div class='row'>
        <div class='col-sm-3'>
            <nav-menu></nav-menu>
        </div>
        <div class='col-sm-9 body-content'>
            <alert-component></alert-component>
            <router-outlet></router-outlet>
        </div>
    </div>
</div>

Мой модальный связанный HTML -

<div class="col-md-4" style="border-radius:8px; background:linear-gradient(50deg, #e1ecfa, #f2fbde); text-align:right; margin-left:12px; padding:10px;">
        <b style="color:darkblue">Invoices issued to this customer</b>

        <ul style="list-style:none" *ngFor="let i of iObj">
            <li (click)="openInvoiceModal('custom-modal-1')" class="glyphicon glyphicon-arrow-right">
                <a>
                    <b>{{i.inv_id}}, on {{i.inv_date}}</b>
                </a>
            </li>
        </ul>
    </div>
*** my test modal ***
<modal id="custom-modal-1">
    <div class="modal">
        <div class="modal-body">
            <h1>Invoice Modal!</h1>
            <p>
                Home page text: Hello There!
            </p>
            <button (click)="closeModal('custom-modal-1');">
                Close
            </button>
        </div>
    </div>
    <div class="modal-background"></div>
</modal>

машинопись с этой страницы -

openInvoiceModal(id: string) {
        this.modalService.open(id);
    }

    closeInvoiceModal(id: string) {
        this.modalService.close(id);
    }

Все остальные файлы и код такие же, как было написано в этой ссылке / руководстве. Я попытался экспериментировать в одном месте с z-index также. Но это не служило цели. Так что я сбит с толку. Несколько изменений в файле modalcomponent также в соответствии с моим макетом CSS и т. Д., Поэтому я публикую его здесь.

export class ModalComponent implements OnInit, OnDestroy {
    @Input() id: string;
    private element: JQuery;

    constructor(private modalService: ModalService, private el: ElementRef) {
        this.element = $(el.nativeElement);
    }

    ngOnInit(): void {
        let modal = this;

        // ensure id attribute exists
        if (!this.id) {
            console.error('modal must have an id');
            return;
        }

        this.element.appendTo('.container-fluid');

        this.element.on('click', function (e: any) {
            var target = $(e.target);
            if (!target.closest('.modal-body').length) {
                modal.close();
            }
        });

        this.modalService.add(this);
    }

    // remove self from modal service when directive is destroyed
    ngOnDestroy(): void {
        this.modalService.remove(this.id);
        this.element.remove();
    }


    open(): void {
        this.element.show();
        $('.container-fluid').addClass('modal-open');
    }

    // close modal
    close(): void {
        this.element.hide();
        $('.container-fluid').removeClass('modal-open');
    }

}

Я не уверен, почему сам модал не показывается. Хотя непрозрачный фон называют средством - я иду правильным путем. ПОЧТИ! Что мне не хватает? Где глюк? Конечно, это должна быть какая-то небольшая хитрая часть, которую я не могу ухватить! Пожалуйста, ведите меня. Дайте мне знать, если вам нужно больше от меня заглушек кода, чтобы понять мой сценарий. Я буду рад поделиться.

В ожидании