Modal freezes screen on clicking on it

Question

I am trying to add a modal on click of a div , but when I click the div the modal appears but my screen freezes and I cannot do anything.

I have referenced this question:- Bootstrap Modal popping up but has a "tinted" page and can't interact. , but it still doesn't work.

I have tried shifting the modal just before the closing tag as mentioned in the question but the problem is the same.

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

Above is my component.html code

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

Above is my component.css code

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

   
}

Above is my component.ts code

Above is the cards and when I click on the card content then below happens.

Here the screen is freezed at this point and I have to refresh the page to access the site again.

I have also tried using z-index:0 for modal-backdrop , but that also didn't work.

If anybody could help resolve this issue, it would be of great help. Thank You!.

Edit:

removing the z-index property fixes this issue from inspect element, but how do I remove it from the code, z-index: unset doesn't work.

score 1 · Accepted Answer · answered Mar 15 '23 at 16:05

1

Your backdrop has z-index:1055; if you want to remove it add

z-index:-1;

this will send the object bellow everything.

But if you ant to keep it there add

z-index: 1056;

or something greater than the backdrop value

answered Mar 15 '23 at 16:05

Shariq Shahid

272
12

Modal freezes screen on clicking on it

1 Answers1