Search code examples
javascriptangularjsmodal-dialogangular-ui-bootstrapshowmodaldialog

ui-bootstrap modal html created and loaded, but isn't shown

I'm trying to display a simple modal using ui-bootstrap.

enter image description here

As you can see in the photo, the html for the modal is loaded but not displayed.

I saw some similar questions on the forum:

I already did what it was suggested there, but still none improvement.

I updated my libraries and now, I'm using:

  • angular: 1.4.9
  • angular-animate: 1.4.9
  • ui-bootstrap: 1.1.1
  • bootstrap.css: 3.6.6

but it didn't helped me.

Also I modified the bootstrap.css like it was proposed in another post:

modal {
    display: none; to display: block;
}

but this didn't also helped me!

Solution

  • I solved the problem, by changing the modal jade from

    div.modal.fade
  div.modal-dialog
    div.modal-content
      div.modal-header
        button.close(type = 'button', data-dismiss = 'modal', aria-hidden = 'true') ×
        h4.modal-title test
      div.modal-body
        h4 test
      div.modal-footer
       h1 test

    to

    div.modal-content
   div.modal-header
     button.close(type = 'button', data-dismiss = 'modal', aria-hidden = 'true') ×
     h4.modal-title test
   div.modal-body
     h4 test
   div.modal-footer
     h1 test