[英]Show ng-container content as a popup
How can I make this content in the code below show up as a new popup on the page when triggered and not in a specific section?如何使下面代码中的此内容在触发时显示为页面上的新弹出窗口,而不是在特定部分中? Is it related to a z-index?
它与z-index有关吗?
Thanks谢谢
<ng-container *ngIf="confirmation">
<div class="check-email">
<div class="title-email" fxLayout="row" fxLayoutAlign="center center">{{ 'check-email-title' | translate }}</div>
<div class="sub-title" fxLayout="row" fxLayoutAlign="center center">{{ 'verify-email' | translate }}</div>
<div class="email-img" fxLayout="row" fxLayoutAlign="center center">
<img src="assets/img/email-message.png" />
</div>
<div fxLayout="row" fxLayoutAlign="center center">
{{ 'do-not-see-email' | translate }}
</div>
<div fxLayout="row" fxLayoutAlign="center center">
{{ 'check-spam-folder' | translate }}
</div>
<div fxLayout="row" fxLayoutAlign="center center">
<a class="click-resend-email">Click here </a>
<div>to send the email again</div>
</div>
</div>
</ng-container>
====================== =======================
First , you can give the "ng-container" a position
property with a value of absolute
or fixed
(depending on your application), this will make "ng-container" appear on top of everything else if it is the last element in your HTML file , this is what I usually do if no rules were put within the team I was working on, however, if for some reason you can't put it at the end then you can use z-index
property with the proper value (usually high number like 1000 if you want to cover everything else that you might've added z-index
to).首先,您可以给“ng-container”一个
position
属性,其值为absolute
或fixed
(取决于您的应用程序),如果它是您的最后一个元素,这将使“ng-container”出现在其他所有内容之上HTML 文件,如果在我正在工作的团队中没有设置任何规则,我通常会这样做,但是,如果由于某种原因你不能把它放在最后,那么你可以使用具有适当值的z-index
属性(如果您想涵盖可能已添加z-index
的所有其他内容,通常为 1000 之类的高数字)。 [I'm not saying that adding the element to the last is a best practice but this is what I do especially for small projects] . [我并不是说将元素添加到最后是最佳实践,但这是我特别为小型项目所做的] 。
Second , use properties top
, right
, left
, and bottom
to adjust the position of your element (you don't need to use all of them)其次,使用属性
top
、 right
、 left
和bottom
来调整元素的 position (不需要全部使用)
Third , you can assign the display
property of "ng-container" the value of none
at the start, and whenever you want the container to appear you can change the value of the display
property to whatever you want using Js.第三,您可以在开始时将“ng-container”的
display
属性值指定为none
,并且每当您希望容器出现时,您可以使用Js将display
属性的值更改为您想要的任何值。
ng-container {
display: block; // or any display setting you're using.
position: fixed;
top: 1rem ; //
right: 1rem; // adjust the position as you need.
left: 1rem; //
bottom: 1rem; //
}
===================== ======================
1 - you might want to wrap the whole thing in a container to make some kind of an effect to let the user know they need to focus on that element, like blurring or darkening everything else behind your popup, simply you need the wrapping container to have the full width and height of the screen using the values 100vw
and 100vh
for the width
and hight
properties respectively, vw
and vh
is to specify how much to take from the viewport in height or width. 1 - 您可能希望将整个内容包装在一个容器中以产生某种效果,让用户知道他们需要专注于该元素,例如模糊或变暗弹出窗口后面的所有其他内容,只需您需要包装容器即可分别使用
width
和hight
属性的值100vw
和100vh
来获得屏幕的全宽和高度, vw
和vh
用于指定从视口的高度或宽度取多少。
2 - you can change the overflow
property of the body to the value hidden
if you don't want scroll ability during this popup. 2 - 如果您不想在此弹出窗口中滚动,您可以将 body 的
overflow
属性更改为hidden
的值。
3 - you can detect if the user clicks on the wrapper to cancel this popup (if the element doesn't take all the width of the container). 3 - 您可以检测用户是否单击包装器以取消此弹出窗口(如果元素没有占据容器的所有宽度)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.