CODEWITHSUNDEEP
javascripthtmlcssangular
Marcus Grass
Marcus Grass

Reputation: 1083

Angular/CSS/Javascript creating a popup that can break out of the restriction of the containing div

I have an Angular project in which I have some components that run inside of other components, what I'm trying to do is to create a popup component which will have the same size and placement regardless of from where it is triggered.

I got the suggestion to use Bootstrap modals instead, but ran into this problem trying to implement it in Angular. While that problem may be solved, the question of problem of a div breaking out of its containing div still stands.

I've been searching different ways of doing this but haven't found any solutions that I could apply when the exact page position isn't known.

What I want is a div that has the attributes of a div placed with absolute position right in the html, an example of what I mean:

<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>

I want the containing div target_div_to_break_out to have the same properties of the absolute_div but am unable to figure out how to achieve that.

In the actual use case there are <app-popup></app-popup> tags inside of another dive that i desperately want to break out and be treated as outside the containing div.

Since I'm using Angular for this a solution using Typescript/javascript is more than welcome if it isn't easily achieved in CSS.

Basically I want a containing div to cover 80% of the entire page, regardless of where inside of other divs it is placed.

Upvotes: 0

Views: 583

Answers (1)

user184994
user184994

Reputation: 18281

Instead of using absolute positioning (which will position it relative to it's first positioned ancestor, i.e. .some-content), you should use fixed positioning, which will position it relative to the entire viewport.

More info on CSS positions can be found here

Upvotes: 1

Related Questions