modal does not show up when on fullscreen mode on an element

[nozer]

If I go full screen on a div element and then if I click on a button on this div to show a modal, that modal will not show up.

Here is a plnkr demo (it is a modified version of what you have on the bootstrap modal template page).
1 - Please click on "launch the preview in a separate window" icon of plnkr and then
2 - Click on "Go Full Screen" button.
3 - Then, when in full screen mode, click on any of the buttons to try to show a modal.

http://plnkr.co/edit/oKZHZZebyNMwpG114Jyy?p=preview

I think that if I could specify in modal options what the parent element of the modal window is, then this could solve the issue.

[rvanbaalen]

This has nothing to do with modal, it's an issue in your 'screenfull' implementation. Please ask questions on StackOverflow and report bugs on GitHub.

https://github.com/angular-ui/bootstrap#need-help

[nozer]

Thank you. I will do as you suggested.

[nozer]

Hi
Instead of using the screenfull library, I used BigScreen library to test this issue. I still have the same problem. This is not related to screenful implementation or BigScreen implementation.

When browsers go on fullscreen on an element, for ui bootstrap's modal to appear in front, i think that, it must be a child of the element that is on fullscreen (I verified this by editing the html source of ui modal from developer tools and pasting it inside the element that has gone full screen and the problem was fixed). Since bootstrap appends the modal window to the body, not to an element that I can specify, this should be filed as a bug.

Here are the steps again (just putting it here again so you won't have to scroll up and read the old one)

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:

[nozer]

I solved this issue by editing the modal source.

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

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, 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'
          });

It would be great if a fix similar to this would be added to the code.

[PanfilovDenis]

This fix work for me! Maybe merge this little patch to master?

[numbata]

@nozer thx for solution. @rvanbaalenv vote for reopen this issue.

[dvislov]

Whoa! Let's merge to master!

[nozer]

Thank you @PanfilovDenis @numbata and @vdv73rus. I will create a pull request later tonight or tomorrow if none else has time to do it.

[bryan-gislason]

Awesome! Literally came looking for this ability right now as it's much needed.

[nozer]

I just created a pull request for this and it says "all checks have passed". I am not sure what I need to do next other than to wait.
#4200

[TurkiWalid]

For the ones who uses Angular2+
this solved my problem:
https://stackoverflow.com/questions/47966814/angular-ngbmodal-how-to-make-specific-modal-be-topmost-all-other-modals