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).

bootstrap_modal_behind_background

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.

So when I was using Angular JS, I wanted to set the form in a modal dialog window back to its pristine state whenever it was shown.

Problem was, the form is always undefined. If I place a code within the modal window, the form exists but when I call it in a Javascript function, it is undefined.

The solution is to add $parent to your form name like this:

This will automatically create the form object in your parent controller. Then, you can simply access it using the scope like $scope.myForm.

Apparently, when I first created a modal window using JQuery and Bootstrap, it appeared behind the background overlay instead.

modal

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...