How To Create Multiple Modals On Top Of Each Other In Bootstrap Using JQuery

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:

How To Auto Height JQuery Modal Window

This post is about JQuery’s modal() function and not the dialog() function. There is the common problem that when the content is long, the height of the modal window does not automatically adjust based on content height.

To bypass this problem, you need to listen to the show event and resize the modal window. This is how to do it.

This code sets the width to auto as well. However, you can change the width value however you see fit and the height will still auto-adjust itself once the show() function is called.

If you noticed in the code, the max-height attribute is set to 100%. If your content is too long, chances are your modal window will be displayed beyond the screen height. To ensure that the height stays within the display screen height, you can use this value instead:

Where 0.8 means 80% of the window screen height.

How To Use JQuery Chosen In Angular JS

If you have no idea what JQuery Chosen is, it is simply a plugin that makes long, unwieldy select boxes much more user friendly.

Using it with Angular JS is no problem. However, a cleaner and simpler way to use it is to make it as a Directive.

For me, this is how I did it.

I used the ngModel attribute to have the scope listen to any changes to it like setting a default value or when a user selects an item in the dropdown.

I tried to use ngOptions as my first choice and had the scope listen to ngOptions.length or attrs[‘options’].length. However when it gets loaded, since I am getting my list asynchronously from the server, it will throw out an Exception.

Not a program stopper but as a developer, nobody wants to see any kind of error messages in the console no matter how harmless they can be. In my case, since I always set all my ngModels a default value, I decided to listen to this attribute instead.

Related Posts Plugin for WordPress, Blogger...