打开 Bootstrap Modal 将冻结整个页面（角度）

Answer 1

当模态关闭时，模态背景消失。

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

在组件 TypeScript 文件中，添加以下函数：

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

确保在您的项目中包含 jQuery，以便此解决方案能够正常工作

(npm install jquery

并将其包含在您的

angular.json

文件中）。