My modal open but I can't do anything. The screen is gray and I can't click anything and no keys work

Example

html:

<button type="button"  (click)="abrirModal()">Filtros</button>
  <button type="button"  (click)="resetaPesquisa()">Limpar Pesquisa</button>
</form>

<div  id="filtro">
  <div >
    <div >
      <div >
        <h2 >Selecione os Filtros</h2>
      </div>
      <div >
        <form [formGroup]="filtroForm" >
          <div >
            <label >Comarca</label>
            <select  formControlName="comarca">
              <option *ngFor="let comarca of comarcas" [value]="comarca">
                {{comarca}}
              </option>
            </select>
          </div>
          <div >
            <label >Vara</label>
            <select  formControlName="vara">
              <option *ngFor="let vara of varas" [value]="vara">
                {{vara}}
              </option>
            </select>
          </div>
        </form>
      </div>
      <div >
        <button type="button"  (click)="filtrar(filtroForm.value)">Filtrar</button>
        <button type="button"  (click)="fecharModal()">Fechar</button>
      </div>
    </div>
  </div>
</div>

I can't access the modal through data.bs.target and data.bs.toggle

my component.ts:

formModal!: Modal;

fecharModal() {
  this.formModal?.toggle();
}

abrirModal() {
  this.formModal = new Modal(document.getElementById('filtro')!);
  this.formModal.show();
}

CodePudding user response：

If I understood correctly, it seems that your problem is related to CSS.

Give the modal-dialog class an overlay style of z-index: 10000; or a number higher than that overlay.

.modal-dialog{
   z-index: 10000
}

CodePudding user response：

I just ran into this problem not too long ago. In your buttons, be sure to do

data-bs-dismiss="modal"

as attributes. In the one that opens your modal, you should have your click event handler. In the button that opens the modal, you will need to have the target set to the Id of the modal. Take a look at the syntax I used in "The Button" below.

Here is some code that I used for a delete confirmation Modal:

The Button:

  <input
    type="button"
    
    value="Delete"
    [hidden]="editing"
    data-bs-toggle="modal"
    data-bs-target="#deleteConfirmation"
  />

The Modal:

  <div
    
    id="deleteConfirmation"
    data-bs-backdrop="static"
    data-bs-keyboard="false"
    tabindex="-1"
    aria-labelledby="deleteConfirmationLabel"
    aria-hidden="true"
  >
    <div >
      <div >
        <div >
          <h5  id="deleteConfirmationLabel">
            Delete Recipe?
          </h5>
          <button
            type="button"
            
            data-bs-dismiss="modal"
            aria-label="Close"
          ></button>
        </div>
        <div >
          Are you sure you want to delete '{{ recipeTitle }}'?
        </div>
        <div >
          <button
            type="button"
            
            data-bs-dismiss="modal"
          >
            Cancel
          </button>
          <button
            type="button"
            
            data-bs-dismiss="modal"
            (click)="deleteRecipe()"
          >
            Delete
          </button>
        </div>
      </div>
    </div>
  </div>