Bootstrap-ui Modal is coming up blank when set inside angular-gantt

Question

I am having difficulties trying to get my modal to come up. I am not sure if it is because modal is not compatible with angular-gantt or if I have the code wrong. At the moment I get a darker screen as if there should be a modal there.

Here is the code for the button in the gantt:

JS:

'content':'<i class=\"fa fa-cog\" data-toggle="modal" data-target="#hp_modal" ng-click="scope.show_details(task.model)"></i>' + 'Gant Object'

Html:

<div class='modal fade' id='hp_modal'>
  <div class='modal dialog'>
    <div class='modal-content'>
      <div class="modal-header">
        <h3>This is HP modal</h3>
      </div>
    </div>
  </div>
</div>

And here is an Image of after I click on the cog:

https://imgur.com/a/CazzaLK

Answer 1

You need to remove all the class modal modal-dialog and modal-content Angular already create them automaticly when you open your modal.

You just keep this tags :

  <div class="modal-header">
    <h5 class="modal-title">My Title</h5>
    <button type="button" class="btn-close" aria-label="Close"></button>
  </div>
  <div  class="modal-body">
    <input type="text" class="form-control" autofocus/>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>

Then if you need to use some features such as modal-dialog-centered, you need to use the NgbModalOptions on open method :

  this.modalRef = this.modalService.open(
    this.dialogTemplateRef,
    {centered:true}
  );