为什么我的模态在后台打开？

Question

I'm trying to make a modal in my angular 7 app using ng-bootstrap 4, but the modal component keeps opening in the background as a div, not as a modal. What am I doing wrong?

this is the component opening modal:

import { Component, OnInit } from '@angular/core';
import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
import { FormBuilder, FormGroup, Validators} from '@angular/forms';
import { AddPetModalComponent } from '../add-pet-modal/add-pet-modal.component';
import { Pet } from '../../models/pet';
import { PetsService } from '../../services/pets.service';

@Component({
  selector: 'app-pets-list',
  templateUrl: './pets-list.component.html',
  styleUrls: ['./pets-list.component.less']      
})
export class PetsListComponent implements OnInit {

  petForm: FormGroup;
  pets: Pet[];
  closeResult: string;

  constructor(
    private formBuilder: FormBuilder,
    private petService: PetsService,
    private modalService: NgbModal,
  ) { }

  openFormModal() {
    const modalRef = this.modalService.open(AddPetModalComponent);

    modalRef.result.then((result) => {
      console.log(result);
    }).catch((error) => {
      console.log(error);
    });
  }

modal component:

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

@Component({
  selector: 'app-add-pet-modal',
  templateUrl: './add-pet-modal.component.html',
  styleUrls: ['./add-pet-modal.component.less']
})
export class AddPetModalComponent implements OnInit {

  constructor(
    public activeModal: NgbActiveModal
  ) { }

  ngOnInit() {
  }

  closeModal() {
    this.activeModal.close('Modal Closed');
  }

}

link to the module on github: https://github.com/Strzesia/Daily-Rat-Monitor/tree/fix/src/app/pets

Answer 1

I took a look around your code quickly and you seem to include essentials, I got it working though with no problems with this Stackblitz . Some pointers that might help you:

• In your app.module you are missing entryComponents: [ AddPetModalComponent ] as you are dynamically populating the modal with a component factory.
• It could be the minified bootstrap CSS that might messing with you, test to put in your index.html in the beginning the CDN as in the Stackblitz example and see if it helps.
• remove your node_modules and re-install dependencies

Hope some of the points help!