Opening a Bootstrap Modal will freeze the entire page (angular)

Question

I have a boootstrap card and I want to open a modal when I click on it:

<div class="row">
    <div class="col-lg-6" *ngFor="let newsItem of filteredNews">
        <div class="box">
            <div class="card mb-3" data-bs-toggle="modal" data-bs-target="#newsModal" (click)="this.selectedItem = newsItem" role="button">
                <div class="row g-0">
                    <div class="col-md-4">
                        <img [src]="newsItem.image" class="img-fluid rounded-start" alt="News Image" style="padding: 10px;">
                    </div>
                    <div class="col-md-8">
                        <div class="card-body">
                            <h5 class="card-title" style="text-align: center;">{{ newsItem.headline }}</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- News Modal -->
<div #newsModal class="modal fade" id="newsModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">{{ selectedItem?.headline }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <img [src]="selectedItem?.image" class="img-fluid rounded-start" alt="News Image" style="padding: 10px;">
                <p>{{ selectedItem?.summary }}</p>
            </div>
        </div>
    </div>
</div>

Clicking on the card will open the modal but also freezes the entire page (and turns it into a gray color).

I tried methods posted on this forum but they did not work.

Thanks for your help!

Answer 1

The modal backdrop is dismissed when the modal is closed.

<div class="row">
    <div class="col-lg-6" *ngFor="let newsItem of filteredNews">
        <div class="box">
            <div class="card mb-3" (click)="openModal(newsItem)" role="button">
                <div class="row g-0">
                    <div class="col-md-4">
                        <img [src]="newsItem.image" class="img-fluid rounded-start" alt="News Image" style="padding: 10px;">
                    </div>
                    <div class="col-md-8">
                        <div class="card-body">
                            <h5 class="card-title" style="text-align: center;">{{ newsItem.headline }}</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- News Modal -->
<div class="modal fade" id="newsModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">{{ selectedItem?.headline }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <img [src]="selectedItem?.image" class="img-fluid rounded-start" alt="News Image" style="padding: 10px;">
                <p>{{ selectedItem?.summary }}</p>
            </div>
        </div>
    </div>
</div>

In your component TypeScript file, add the following function:

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  selectedItem: any;

  openModal(newsItem: any) {
    this.selectedItem = newsItem;
    $('#newsModal').modal('show'); // Make sure to include jQuery
  }
}

Make sure you include jQuery in your project for this solution to work (npm install jquery and include it in your angular.json file).