angular bootstrap modal won't appear in the front when browser is full screen on an element

Question

When I go full screen on an element and then try to display angular bootstrap's modal in front, it won't appear in front.

To test it:

1 - Click on this link http://plnkr.co/edit/oKZHZZebyNMwpG114Jyy?p=preview

2 - Click on the "launch the preview in separate window" icon (image shown below)

3 - Click on Go Full Screen Button (you will then be in full screen on the element with id fullable)

4 - Then click on any of the buttons to try to show a modal.

Here is how to "launch the preview in separate window" on plnkr:

Answer 1

Solution to this problem required modal window to be appended to the element of my choice (in this case, element that goes full screen).

To accomplish this, I updated the angular bootstrap modal's code so that options object we pass to the $modal.open() function now accepts an appendTo property which is a css selector that will be used by document.querySelector.

In modal code (version 0.12.1), I changed from these:

var body = $document.find('body').eq(0), 
    currBackdropIndex = backdropIndex();
...

$modalStack.open(modalInstance, {
            scope: modalScope,
            deferred: modalResultDeferred,
            content: tplAndVars[0],
            backdrop: modalOptions.backdrop,
            keyboard: modalOptions.keyboard,
            backdropClass: modalOptions.backdropClass,
            windowClass: modalOptions.windowClass,
            windowTemplateUrl: modalOptions.windowTemplateUrl,
            size: modalOptions.size
          });

to these:

var body = angular.element(document.querySelector(modal.appendTo)),
            currBackdropIndex = backdropIndex();
...

$modalStack.open(modalInstance, {
            scope: modalScope,
            deferred: modalResultDeferred,
            content: tplAndVars[0],
            backdrop: modalOptions.backdrop,
            keyboard: modalOptions.keyboard,
            backdropClass: modalOptions.backdropClass,
            windowClass: modalOptions.windowClass,
            windowTemplateUrl: modalOptions.windowTemplateUrl,
            size: modalOptions.size,
            appendTo: modalOptions.appendTo || 'body'
          });

I opened an issue for this on github but it was closed without resolution so I had to update my local copy. Github issue is here: https://github.com/angular-ui/bootstrap/issues/3686

Please note: Since I am using document.querySelector for this, fix will work on browsers that support document.querySelector (almost all plus IE >= 9) http://caniuse.com/#feat=queryselector