影响iOS中固定位置元素的溢出限制的解决方法?

编辑:主要问题是这样的:溢出:隐藏和溢出:自动影响iOS中的固定定位元素。

所以,如果我在页面的滚动function中的某个组件中有一个固定位置的模式对话框,那么该元素将不会显示在超出其父窗口的任何位置。 这真的搞砸了,因为它不是固定定位在任何其他系统上的工作方式。 那么对此的官方回应是什么?

原文:

我有一个模式对话框,可以在桌面和Android上正常工作,但是在我iPad上的任何浏览器上,包括模式叠加在内的模式对话框都会隐藏在超出其父容器边界的位置(即使位置固定)。 我知道这不是如何溢出:汽车应该工作,因为它在所有其他设备上工作得很好。 任何人都经历过这个? 我相信这与iOS如何处理固定位置有关。

无论如何,这里有一些代码:

HTML:

<confirm-dialog ng-if="$ctrl.confirmDlgShowing" on-close="$ctrl.closeDlgs()" on-confirm="$ctrl.deleteInstance()" class="ng-scope ng-isolate-scope"> <div class="modal general modal"><div class="modal-window"><div class="modal-inner" ng-transclude=""> <div style="position:relative" class="ng-scope"> <label class="modal-close" ng-click="$ctrl.onClose()"></label> <div class="page-heading"> <h2>Are you sure?</h2> </div> <input class="btn" type="button" value="Yes" ng-click="$ctrl.confirm()"> <input class="btn" type="button" value="No" ng-click="$ctrl.onClose()"> </div> </div></div></div> </confirm-dialog> 

上海社会科学院:

 .container { overflow: auto; .modal-window { // overlay @include transition(opacity 0.25s ease); @include position(fixed, 0px 0px 0px 0px); background: rgba(0,0,0, 0.6); padding-top: 0.6em; text-align: left; z-index: 999999999; margin: 0 !important; .modal-bg { @include position(absolute, 0px 0px 0px 0px); cursor: pointer; } } .modal-inner { @include transition(opacity 0.25s ease); background: $modal-background; border-radius: $base-border-radius; display: table; margin: 70px auto; max-height: 80%; overflow: auto; padding: $modal-padding / 2; z-index: 1000000000; min-width: 400px; @media(max-width: $medium-screen) { max-height: 70%; padding: $modal-padding; } } } 

下面是我们最终想到的解决方法 – 一个新的指令来取代ng – 如果我们的模式,把对象放在身体上。 与其他Angular绑定也很好地玩。

 angular.module('app').directive('rootIf', function() { return { restrict: 'A', link: function (scope, $elm, attrs) { scope.$watch(attrs.rootIf, onChangeRootIf); function onChangeRootIf() { if (scope.$eval(attrs.rootIf)) $("body").children().first().before($elm); else $elm.detach(); } } } });