Im using creative tim free angular argon-dashboard template, im trying to create a modal but when i click the button to open the modal, it opens but then the screen gets a bit overlay dark and the modal doesnt close when i click close or when i click outside the modal
heres the image of it

this is my current code

import { Component, OnInit } from '@angular/core';
import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-banco',
  templateUrl: './banco.component.html',
})
export class BancoComponent implements OnInit {
  closeResult: string;

  constructor(private modalService: NgbModal) {}

  ngOnInit(): void {}

  open(content, type, modalDimension) {
    console.log('Opening modal with content:', content);
    console.log('Type:', type);
    console.log('Modal Dimension:', modalDimension);

    let modalRef;
    if (modalDimension === 'sm' && type === 'modal_mini') {
      modalRef = this.modalService.open(content, { windowClass: 'modal-mini', size: 'sm', centered: true });
    } else if (modalDimension === '' && type === 'Notification') {
      modalRef = this.modalService.open(content, { windowClass: 'modal-danger', centered: true });
    } else {
      modalRef = this.modalService.open(content, { centered: true });
    }

    modalRef.result.then(
      (result) => {
        this.closeResult = `Closed with: ${result}`;
        console.log(this.closeResult);
      },
      (reason) => {
        this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
        console.log(this.closeResult);
      }
    );
  }

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

<!-- banco.component.html -->
<div class="header bg-gradient-success pb-8 pt-5 pt-md-8">
  <div class="container-fluid">
    <div class="header-body">
      <div class="row">
        <div>
          <!-- Button to open the modal -->
          <button type="button" class="btn btn-success" (click)="open(classic3, 'modal_mini', 'sm')">
            <i class="fas fa-plus mr-2"></i>Novo
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Page content -->
<div class="container-fluid mt--7">
  <!-- Table -->
  <div class="row">
    <div class="col">
      <div class="card shadow">
        <div class="card-header bg-transparent">
          <button type="button" class="btn btn-success" (click)="open(classic3, 'modal_mini', 'sm')">
            <i class="fas fa-plus mr-2"></i>Novo
          </button>
        </div>
        <div class="card-body">
          <div class="table-responsive">
            <table class="table align-items-center table-flush">
              <thead class="thead-light">
              <tr>
                <th scope="col">Nome</th>
                <th scope="col">SIGLA</th>
                <th scope="col">Acção</th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <th scope="row">Banco Comercial de Investimentos</th>
                <td>BCI</td>
                <td>
                  <button type="button" class="btn btn-info btn-sm mr-2">
                    <i class="fas fa-edit"></i> Editar
                  </button>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Modal template -->
<ng-template #classic3 let-c="close" let-d="dismiss">
  <div class="modal-content">
    <div class="modal-header">
      <h6 class="modal-title" id="modal-title-default">Modal title</h6>
      <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
        <span aria-hidden="true">×</span>
      </button>
    </div>
    <div class="modal-body">
      <!-- Your form HTML here -->
      <form>
        <div class="form-row">
          <div class="form-group col-md-6">
            <label for="inputEmail4">Email</label>
            <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
          </div>
          <div class="form-group col-md-6">
            <label for="inputPassword4">Password</label>
            <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
          </div>
        </div>
        <div class="form-group">
          <label for="inputAddress">Address</label>
          <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
        </div>
        <div class="form-group">
          <label for="inputAddress2">Address 2</label>
          <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
        </div>
        <div class="form-row">
          <div class="form-group col-md-6">
            <label for="inputCity">City</label>
            <input type="text" class="form-control" id="inputCity">
          </div>
          <div class="form-group col-md-4">
            <label for="inputState">State</label>
            <select id="inputState" class="form-control">
              <option selected>Choose...</option>
              <option>...</option>
            </select>
          </div>
          <div class="form-group col-md-2">
            <label for="inputZip">Zip</label>
            <input type="text" class="form-control" id="inputZip">
          </div>
        </div>
        <div class="form-group">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="gridCheck">
            <label class="form-check-label" for="gridCheck">
              Check me out
            </label>
          </div>
        </div>
        <button type="submit" class="btn btn-primary">Sign in</button>
      </form>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button>
      <button type="button" class="btn btn-primary">Save changes</button>
    </div>
  </div>
</ng-template>