0

I'm using angular 2 in my web application. My application uses a lot of bootstrap modals. I noticed that the modals contained inside a sub-route component are not showed correctly. Infact, the modals contained inside the navbar element (the navbar is in the main state and always visible) are shown correctly, but those that are contained in the sub-route (so the html is loaded dinamically) present a bug... the shadow seems to be above the dialog itself, so it is impossible to press the buttons.

This is a screenshot: enter image description here

As you can see the backdrop is above the dialog. This happen only on mobile devices.

What am I doing wrong? I would avoid to keep all the modals inside the navbar and then open them with global events...

Thanks a lot

EDIT: I found this document:

If the modal container or its parent element has a fixed or relative position, the modal will not show properly. Always make sure that the modal container and its parent elements don’t have any special positioning applied. The best practice is to place a modal’s HTML just before the closing </body> tag, or even better in a top-level position in the document just after the opening <body> tag. This is the best way to avoid other components affecting the modal’s appearance and functionality.

But is this the html of my modals (a lot of modals) is always in the dom. Isn't a heavy solution?

user3471528
  • 3,013
  • 6
  • 36
  • 60

1 Answers1

1

I fixed the problem using the following javascript code:

$('#myModal').appendTo("body").modal('show');

Thanks to Adam Albright for his post.

user3471528
  • 3,013
  • 6
  • 36
  • 60