ios - 影响iOS中固定位置元素的溢出限制的解决方法？
<p><h3>编辑:主要问题是这样的:溢出:隐藏和溢出:自动影响 iOS 中的固定定位元素。</h3>
<p>因此，如果我在页面的滚动功能内的组件中有一个固定定位的模态对话框，则该元素不会显示在超出其父级边界的任何位置。这真是一团糟，因为它不是固定定位在任何其他系统上的工作方式。那么官方对此有何回应？</p>
<h3>原帖:</h3>
<p>我有一个在桌面和 Android 上运行良好的模态对话框，但在我 iPad 上的任何浏览器上，模态对话框，包括模态覆盖，在超出其父容器边界的任何地方都会隐藏(即使它是固定的)定位)。我知道这不是溢出:auto 应该可以工作，因为它在所有其他设备上都可以正常工作。还有其他人经历过吗？我确定这与iOS如何处理固定位置有关。</p>
<p>不管怎样，这里有一些代码:</p>
<p>HTML:</p>
<pre><code><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>
</code></pre>
<p>SASS:</p>
<pre><code>.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;
}
}
}
</code></pre></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>这是我们最终想出的解决方法——在将对象放置在主体上的模态中替换 ng-if 的新指令。也可以很好地与其他 Angular 绑定(bind)一起使用。</p>
<pre><code>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();
}
}
}
});
</code></pre></p>
<p style="font-size: 20px;">关于ios - 影响iOS中固定位置元素的溢出限制的解决方法？，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/36435155/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/36435155/
</a>
</p>
页:
[1]