set z-index to display 2 elements on top of all others breaks bootstrap Modals

[macsupport]

When I include a Bootstrap 3 modal on a page with nanogallery, the "set z-index to display 2 elements on top of all others" function allows thumbs to show thru the modal (usually after hover). Any workaround for this?

[Kris-B]

This is dependant of the selected hover effect.
I do not have any workaround for the moment (except using another hover effect), but I'll check if this issue can be solved.

[macsupport]

Any update on this?
Seems like an important issue considering the number of web sites out there using Bootstrap.

[vbanuelos]

@macsupport --
I had to create similar functionality, and as a workaround set the z-index for the modal whenever it shows.

$('#yourModal').css('z-index', parseInt($('#nanoGalleryViewer').css('z-index'), 10) + 1);

[macsupport]

@vbanuelos Thanks but not working for thumbnails after hovering for me. They still have a z-index above the modal.
Also, this occurs not just in Bootstrap but other modal plugins as well. I can delete the code in nanogallery.js that sets the index higher:

    jQuery(elt2).css('z-index',highest_index+1);
     jQuery(elt1).css('z-index',highest_index);

but this really should be fixed, IMHO.