angular bootstrap 当浏览器在一个元素上全屏显示时，模式不会出现在前面

Question

当我在某个元素上全屏然后尝试在前面显示 angular bootstrap 的模式时，它不会出现在前面。

测试它：

1 - 点击这个 link http://plnkr.co/edit/oKZHZZebyNMwpG114Jyy?p=preview

2 - 单击 "launch the preview in separate window" 图标（如下图所示）

3 - 单击转到全屏按钮（然后您将全屏显示 ID 为 fullable 的元素）

4 - 然后单击任何按钮以尝试显示模式。

以下是如何在 plnkr 上 "launch the preview in separate window"：

Answer 1

此问题的解决方案需要将模态 window 附加到我选择的元素（在本例中为全屏元素）。

为此，我更新了 angular bootstrap 模态的代码，以便我们传递给 $modal.open() 函数的 options 对象现在接受 appendTo 属性这是一个 css 选择器，将由 document.querySelector 使用。

在 modal 代码（版本 0.12.1）中，我将这些更改为：

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

这些：

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

我在 github 上为此打开了一个问题，但它没有解决就关闭了，所以我不得不更新我的本地副本。 Github 问题在这里：https://github.com/angular-ui/bootstrap/issues/3686

请注意： 因为我为此使用 document.querySelector，修复将在支持 document.querySelector 的浏览器上运行（几乎所有加上 IE >= 9 ) http://caniuse.com/#feat=queryselector

angular bootstrap 当浏览器在一个元素上全屏显示时，模式不会出现在前面

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

angular-ui-bootstrap

bootstrap-modal

angular-bootstrap