我试图在单击div时添加模态，但当我单击div时，模态出现，但我的屏幕冻结，我无法做任何事情。
我已经参考了这个问题：-Bootstrap Modal popping up but has a "tinted" page and can't interact.，但它仍然不工作。
我试过在问题中提到的结束标记之前移动模态，但问题是相同的。

<div class="card-container">
                    <article class="card">
                        <div class="card-img-container" >
                            <img class="card-img" src="https://images.unsplash.com/photo-1473186505569-9c61870c11f9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="">
                        </div>
                        
        
                        <div class="card_content" (click)="loadModal(content)">
                            <ng-template #content let-c="close" let-d="dismiss">
                                <div class="modal-header">
                                    <h4 class="modal-title" id="modal-basic-title">Hi there!</h4>
                                    <button type="button" class="btn-close" aria-label="Close" (click)="d('Cross click')"></button>
                                </div>
                                <div class="modal-body">
                                    <p>Hello, World!</p>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-outline-dark" (click)="c('Save click')">Save</button>
                                </div>
                            </ng-template>
                        </div>
                        
                    </article>
    </div>

以上是我的component.html代码

.card-container{
        margin-left: 15vh;
        margin-top: 70vh;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        row-gap: 40px;
        column-gap: 60px;
    }
    
    .card {
        position: relative;
        width: 280px;
        height: 250px;
        color: #2e2d31;
        background: #131313;
        overflow: hidden;
        border-radius: 10px;
    }
    
    .card-img-container{
        width: auto;
        height: 100%;
    }
    
    
    .card-img{
        height: 100%;
    }
    
    .card_title {
        font-weight: bold;
    }
    
    
    .card_content{
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 20px;
        background: #f2f2f2;
        border-top-left-radius: 20px;
        transform: translateY(150px);
        transition: transform .25s;
    }
    
    .card_content::before {
        content: '';
        position: absolute;
        top: -47px;
        right: -45px;
        width: 100px;
        height: 100px;
        transform: rotate(-175deg);
        border-radius: 50%;
        box-shadow: inset 48px 48px #f2f2f2;
    }
    
    .card_title {
        color: #131313;
        line-height: 15px;
    }
    
    .card_subtitle {
        display: block;
        font-size: 12px;
        margin-bottom: 10px;
    }
    
    .card_description {
        font-size: 14px;
        opacity: 0;
        transition: opacity .5s;
    }
    
    .card:hover .card_content {
        transform: translateY(20px);
    }
    
    .card:hover .card_description {
        opacity: 1;
        transition-delay: .25s;
    }

以上是我的组件.css代码

import { Component, ElementRef, OnInit, Renderer2, TemplateRef, ViewChild } from '@angular/core';
import { NgbModal, ModalDismissReasons, NgbModalConfig } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: '[app-home],[ngbd-modal-basic]',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit{

    // @ViewChild('cardId') cardId!:ElementRef;
    constructor(private renderer: Renderer2,private eleRef: ElementRef,  private modalService: NgbModal, config: NgbModalConfig){
        config.backdrop = 'static';
        config.keyboard = false;
    }

    ngOnInit(): void {
       
    }

    // ngAfterViewInit(){
    //     this.renderer.listen(this.cardId.nativeElement,'click',()=>{
    //         console.log("Success");
    //     })
    // }
    load= false;
    closeResult = '';
    loadModal(content: TemplateRef<any>) {
        this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then(
            (result) => {
                this.closeResult = `Closed with: ${result}`;
            },
            (reason) => {
                this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
            },
        );
    }

    private getDismissReason(reason: any): string {
        if (reason === ModalDismissReasons.ESC) {
            return 'by pressing ESC';
        } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
            return 'by clicking on a backdrop';
        } else {
            return `with: ${reason}`;
        }
    }

   
}

以上是我的组件.ts代码

上面是卡片，当我点击卡片内容时，下面会发生。

这里的屏幕冻结在这一点上，我必须刷新页面再次访问该网站。
我也尝试过使用z-index：0作为 * modal-background *，但同样不起作用。
如果有人能帮助解决这个问题，那将是很大的帮助。谢谢！。
编辑：

删除z-index属性可以从inspect元素中修复此问题，但如何从代码中删除它，z-index: unset不起作用。