I came across a problem using Bootstrap 2.3.1 and creating a modal popup window. The result looked somewhat like this (photo taken from a thread in StackOverflow).
Now, in the StackOverflow forum, I read posts that showed a solution by appending it to the body instead of having to place the DIV layer outside any nested elements, like perhaps just before the tag.
This is how they said to do it:
This may look correct but there is actually a problem with this one. In my Angular JS web application, whenever I call this code, it shows the modal with the correct data. However, succeeding calls to it will show the modal that were created previously.
This is because of the appendTo(‘body’) call. Now, if we remove it when the modal is closed, the modal popup will not appear again.
Bootstrap version 3 seemed to fix this problem. However, since I already created my web template based on Bootstrap 2.3.1, I had to find a way to make sure that the modal popup window will only be appended to the BODY tag once.
The solution to this is to assign the return value of $(‘#div’).appendTo(‘body’) to a variable like this:
This way, the DIV layer element that contains the content of the modal popup will only be appended to the BODY element once and calls to modal(‘show’) will not bring up any other modal windows.
Apparently, when I first created a modal window using JQuery and Bootstrap, it appeared behind the background overlay instead.
I had no idea why but Adam Albright put in a good explanation in the Stack Overflow forum stating that the problem has to do with the positioning of the parent containers. You can easily “move” your modal out from these containers before displaying it.
So regardless where your div content for the modal is placed, just make sure you open the first modal by appending it to the body like this:
Then, if you want to open another modal on top of the modal (and so on …), do it like this: