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.

Well, this one bugged me down for hours. I thought the problem was Bootstrap’s form-control CSS class since removing it shows the Jquery UI DatePicker widget but the input field styling is gone.

User lastoneisbearfood in the StackOverflow forum provided 2 easy solutions of your preference: either adding a css attribute or doing it Javascript style.

on-JS Just add z-index:1051; to the style attribute of your input element. This is based on the observation that bootstrap .modal class uses a z-index of 1050.

Dynamic solution using JS When declaring your datepicker, add a beforeShow handler that retrieves the z-index of .modal and set datepicker’s z-index to 1 higher than that:

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:

Related Posts Plugin for WordPress, Blogger...