In the last video we started putting together an HMO document for this little model example.
So let's keep working on it.
Right now I'm gonna flip back over to my HMO document and down inside of the body I'm going to place
a new div above the sidebar please make sure you make it above the sidebar and I'm going to give it
a class of motile as you might guess this is going to serve as the modal element that should be obscuring
the sidebar and the content inside of this div.
I'm going to place a div with a class of modal Dasch body and inside of that inner inner div I'll give
it an H one with some text like I am a modal like so.
Now why are we using two divs here.
Well the outer div right here is meant to serve as the kind of gray background that's going to obscure
all the content behind it the inner div with modal Dasch body is meant to represent this element right
here.
So the actual kind of white window of sorts that's going to show some content inside of it.
So usually we put these models together with the two separate elements one for the background one for
the foreground so to speak.
Now if we save that HMO document now and then refresh our page no we don't really see a whole lot going
on.
You'll notice that we now see I am some content shifted down.
The reason we don't see our content that says I'm a modal is that it's been obscured behind the sidebar
right now.
So we really need to add in some more CSSA before this is going to make any sense.
Let's look back over.
All right inside of my style tag I'm going to add on some selectors for modal and modal dash body.
I'm going to start off first with modal so going to say modal.
I'm going to give this a height of 100 percent or with of 100 percent.
I'll give it a position of fixed a background color of gray and then a left of zero a top of zero.
Now I think that should be just about it for the background and we'll add in just a little bit for the
modal body as well.
I'm going to put the modal body selector above the modal just because it's going to make looking at
some the CSSA in just a moment a little bit easier for us.
So I'll say up here.
Motile Dasch body will have a background color of white.
I'll give it a margin.
Auto which is going to center this window on the screen horizontally that is not vertically.
Well give it a height of 30 percent and a width of 30 percent.
Now some of these rules in the long run are not going to work out super well for motile.
I'm just trying to get a example here on the window or inside of a browser.
Very quickly so I'm going to save this again.
Flip back over.
All right.
Now that looks a little bit better.
There's just one little issue.
I see the Modahl on screen.
So here's the kind of white content center window.
I see the gray background but you'll notice the issue here is that we've got the green.
I am a sidebar still on the left hand side.
So ideally we would get the side bar behind the motile and I shouldn't even really say idealy that's
just plain how it should work.
The sidebar should not be displayed on top of the motile.
So we need to figure out what is going on here and how we can fix this issue well to fix this issue.
We can use a feature called z index a z index is essentially a CSSA rule that's going to control what
element gets rendered on top of another element we assign z index properties integer values anywhere
from negative values all the way to positive values.
The higher a element or Seamew the higher z index value that an element has makes it more likely or
higher priority to be displayed on the top of the screen.
So right now if we give our model a z index of 10 it will be displayed on top of the sidebar which by
default has a z index of 0 or technically undefined.
In this case.
So to fix this up I'm going to go back over find my modal class right here and I'll give it a Z dash
index of 10.
Like so.
So now this has a higher z index.
They on our Sidebar.
So our motile should be displayed on top.
So I'm going to save that I'll flip back over again or refresh.
And now we see that the sidebar goes away.
It doesn't technically go away.
It's still in the background.
It's just that our gray background right here is visible on top of the sidebar.
OK.
So this looks like it's working out pretty well but I'm going to throw a little bit of a wrench into
this plan right here.
OK.
You got through a little problem in remember when ever we show content with react.
We are always showing all of our components inside of a single div like so and so I want you to imagine
that maybe at some point in time we put together a modal component which is exactly what we really want
to do for this daily screen or that delete page.
So remember this Modal right here is always going to be deeply nested inside of our application.
We might have a tremendous amount of H-G mail or a tremendous amount of GSX with a ton of styling as
parents to that modal component.
So this motile right here is going to be wrapped by maybe two or three divs inside of stream delete
maybe another div inside the app.
Another day with the idea of root right here and every one of those divs can have some amount of styling
being applied to it.
So I just want you to keep that in mind for one second.
When I threw a little wrench into our current example.
All right.
I'm going to go back over to my editor and I'm going to wrap my modal element right here with a new
div.
I'm going to give that div a class of positioned and then I'll add in a selector for it right here positioned
like so now I'm going to give positioned to very specific rules.
I'm going to say position is relative and I'm going to give it a z index of 0.
Like so Zangana saved this.
We're going to flip back or the browser and we're going to see what happens.
So when I refreshed the page we're back to the original case where I see I am a sidebar appearing on
the left hand side of the screen.
So why is that.
You'll notice that we still have motile right here with a z index of 10 which is far greater than our
sidebar which has a z index of essentially undefined.
So there is something about adding in positioned with a position of relative and z index of 0 that through
the styling off entirely.
So let's take a look at a diagram and understand why we're now seeing the sidebar on top.
So here we go right here.
So we now have our body element at the very top.
We still have the sidebar with the z index essentially of undefined on just going put 0 on there for
the sake of discussion.
We now have something called the positioned element right here that has that position of relative Z
next of 0.
And as a child 2 it is our motile with a z index of 10.
So here's the issue.
Whenever we place a div with a position of relative and a z index of some defined value even if it's
zero.
So we have some assigned value for z index.
It creates something called a stacking context.
There are many different ways to create a stacking context with success.
We can create a new stacking context by using a position of relative and a z index of 0.
But that's just one of many ways of doing this.
When we create a stacking context it essentially creates a new way of comparing different sibling elements
that have assigned z index values that might want to be rendered on top of each other.
Essentially when we create this stacking context right here we no longer compare sidebars z index with
a modals z index.
Instead we compare these sidebars the index with the root element that has the stacking context that
contains the motile.
So now it is the sidebar with a z index of undefined against the positioned element with a z index of
zero.
And in this case sidebar wins effectively there is the indexes are the same but the sidebar element
occurs later.
See how we have positioned right here and then sidebar is written out.
There is an element listed later on inside of the body element if these indexes are the same then whichever
element occurs later or second will be displayed on top of the other.
So that's why the sidebar is now being displayed on top because we are creating this new stacking context.
And so we are now comparing the sidebar against positioned all right and so we end up with this bad
example right here.
So how would we fix this.
Well before we even think about fixing it you might say to me.
All right.
Well Stephen this seems like a really silly example.
But we have to do is take out this div with class positioned right.
That seems like a real simple example or maybe we should change the z index a position right here.
Now we could change it to like 99.
And now that's going to definitely beat out the sidebar.
So if I save this now and refresh we're back to the original good case.
Well here's the issue.
Remember I've now made a pretty big deal saying that when we have a re-act application we've got all
of these different divs all these different elements all these different components.
And our model might be deeply nested inside there.
And so this is a kind of contrived example of how a application might look that you are going to work
on some day you might work on an application that already has hundreds of components inside of it and
you might have a super deeply nested component structure.
And so it's not always going to be quite so easy for you to just say oh yeah I just need to like change
some parents DSS because this might be CSSA that has been super finely tuned and if you change it you
might break the entire application.
So it's not always a good solution to just say oh yeah just delete that div right there and you'll be
good to go or to change the z index on it and you'll be good to go.
It's incredibly likely that if you're adding a motile into some existing application you might end up
having to break the entire layout and rewrite all the CSSA for the project.
At least the layout us to get a modal working.
So just saying oh yeah I'm going to change the styling or the z index on this position.
Elmet right here or delete it entirely is not a good solution.
It's not a solution at all.
So again how are we going to do this.
Well essentially we're going to use a little bit of a cheat.
Here's what we're going to do rather than showing our model as a child of positions.
We're going to instead show the modal as a child of the body.
Now you might look at this and still think Stephen way that goes against what you were just saying two
seconds ago.
Well not quite.
Remember when we look at this diagram right here of how we have to put re-act applications together
we had said that if the stream delete wants to show a modal the modal component will be rendered down
here.
So I'm essentially saying rather than follow the normal rules of re-act where we nest all of our components
underneath each other we should try to kind of like break or bend this rule a little bit and that's
exactly what we're going to do by using this portable thing with portal's.
We don't have to stick with this type of component hierarchy where everything is a child of this div
with the ID of root.
Instead when we use a portal we can essentially say OK stream delete We want you to render a modal component
but we don't want to have you render a modal as a direct child.
Instead try to render the model component but make it a child of some other element in our HMO hierarchy
such as the body element way back up here.
So that's the core purpose of a portal.
A portal allows us to render some element not as a direct child.
We can instead render that element or that component as a child of some other element inside our HDL
structure.
Most commonly the body why would we want to do this at all.
Well we would do this to get around all this rules of stacking contexts or trying to show a modal or
CSSA issues or stuff like that.
There are many different scenarios.
Modals are just one of them but it's the easiest one to show where we might want to render some element
or some component as a child of some other element inside of our application as opposed to just a direct
child of some given component.
So now if we render the modal as a direct child of the body we can set any z index on it that we want.
We will not run into that same stacking context issue that we saw a second ago and will be totally fine
and the modal will show up correctly and not conflict with any other element inside of application.
And so if we go back here to this HTL example the Senshi we would imagine still leaving position there
and leaving whatever other content position had you know maybe position had a bunch of text inside it
or something like that.
And we're going to instead just take our div with class modal and make it a direct child of the body
like so.
So now if I save this we can go back over and we're back to good operation as we saw before.
OK.
That's that's pretty much it.
That's why we make use of portal's.
Now the one part I left out here is telling you how we use a portal.
So let's take a quick pause right here.
When we come back in in the next section I'll show you how we create a portal and render something into
it.
So quick break in I'll see you in just a minute.