Modal 在点击它时冻结屏幕

Question

我试图在单击 div 时添加一个模态，但是当我单击 div 时，模态出现但我的屏幕冻结，我无法做任何事情。

我已经引用了这个问题：- Bootstrap Modal 弹出但有一个“有色”页面并且无法交互。 , 但它仍然不起作用。

我试过在问题中提到的结束标记之前移动模态，但问题是一样的。

<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;
    }

上面是我的component.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}`;
        }
    }

   
}

上面是我的component.ts代码

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

此时画面卡住，必须刷新页面才能再次访问该站点

我也尝试过将 z-index:0 用于 modal-backdrop ，但这也没有用。

如果有人可以帮助解决这个问题，那将有很大帮助。谢谢！

编辑：

删除 z-index 属性从检查元素中修复了这个问题，但是我如何从代码中删除它，

z-index: unset

不起作用。

Answer 1

你的

backdrop

有

z-index:1055;

如果你想删除它添加

z-index:-1;

这将把对象发送到所有东西下面。

但是如果你想把它放在那里添加

z-index: 1056;

或大于背景值的东西