gpt4 book ai didi

javascript - Angular/CSS/Javascript 创建一个可以突破包含 div 限制的弹出窗口

转载 作者:太空宇宙 更新时间:2023-11-04 07:07:38 26 4
gpt4 key购买 nike

我有一个 Angular 元素,其中有一些组件在其他组件内部运行,我想做的是创建一个弹出组件,无论从何处触发,它都具有相同的大小和位置。

我得到了改用 Bootstrap 模态的建议,但运行了 into this problem trying to implement它在 Angular 。虽然该问题可能已解决,但 div 脱离其包含的 div 的问题仍然存在。

我一直在寻找不同的方法来执行此操作,但没有找到在不知道确切的页面位置时可以应用的任何解决方案。

我想要的是一个 div,它具有在 html 中以绝对位置放置的 div 的属性,我的意思的一个例子:

<html>
<body>
<div class="absolute_div" style="position:absolute; height:80%; width:80%; left:10%; right:10%; margin:0; padding:0;">
</div>
<div class="some_content" style="position: relative; height: xx; width: xx">
<div class="target_div_to_break_out" style="position:absolute; height:80%; width:80%; left:10%; right:10%; margin:0; padding:0;">
</div>
</div>
</body>
</html>

我希望包含的 div target_div_to_break_out 具有与 absolute_div 相同的属性,但我不知道如何实现。

在实际用例中有<app-popup></app-popup>另一个潜水内的标签,我非常想突破并被视为包含 div 的外部。

由于我为此使用 Angular,如果使用 Typescript/javascript 的解决方案在 CSS 中不容易实现,则非常受欢迎。

基本上,我希望包含的 div 覆盖整个页面的 80%,而不管它放置在其他 div 中的什么位置。

最佳答案

而不是使用绝对定位(它将相对于它的第一个定位祖先定位,即.some-content),你应该使用fixed 定位,这将相对于整个视口(viewport)进行定位。

可以找到有关 CSS 位置的更多信息 here

关于javascript - Angular/CSS/Javascript 创建一个可以突破包含 div 限制的弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51456683/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com