So back in the course project, I want to start by taking advantage of that backdrop
you added in the last course module.
I want to make sure that we can click these choose plan buttons and of course we could directly redirect
the user to some other page
but here, I really want to open a modal which is like a pop-up in the page you could say. You know it from
a lot of pages,
it's an overlay over the other content of your page
so to say.
Now you already added this backdrop with Manuel, here
this backdrop div which you added to your HTML files,
this will be one piece of the modal, it will be the background of the modal
so that we can click
any other content on the page.
The other part is the modal itself,
so the content we want to overlay and attached to this video, you find the HTML code for that modal.
So copy that code and add it right after or in front of your backdrop here, like this.
Now this code here simply is just a div with a h1 tag where we say do you want to continue
and then a class modal actions where we essentially render two different buttons, one of them is a link
styled as a button which says yes and the other one is a normal button which says no which should just
close the modal.
Now here, we navigate to start hosting index.html,
that's the last missing page of our project,
we'll add it later but for now, it's nice to have that button already
and of course you see we've got a bunch of CSS classes added to our modal elements here and to take advantage
of these classes and style this modal in a nice way,
we need CSS code. Attached to this video, you also find a CSS file with the styles for this modal,
so simply open that file and copy the styles you find in there into your main.css file, maybe just towards
the end of that file. In there you'll find things you already learn about, position fixed, set index, top,
left, width, background color, box shadow and borders, some alignment, stylings here, also maybe new this cursor
pointer which just makes sure that when we hover over the button that we get this pointer cursor, so
which turns our mouse cursor into a cursor that looks like a clickable element or that we are over a
clickable element and some pseudo classes to change the styling when we hover over the different buttons
and so on.
That's really all that our modal requires.
Now please keep in mind, this set index here of the modal has to be higher than the set index of our
backdrop because the backdrop which has a set index of 100 should be in front of the other content we
got
but the modal itself then again should be in front of the backdrop.
So if we add all that and we save that, we can reload our page and we don't actually see anything.
The reason for that is that for the modal just as with the backdrop, we got a display style of none.
Now we can comment this out, so let's comment it out,
so to essentially show our modal and let's also comment out the display style of the backdrop so that
both are not none
and if we reload the page now, this is how our modal will look in the end,
this is the modal we added and which I want to show when we click such a button.
Of course it shouldn't be always shown as it is now though, it should only show up once we did
click a button and it should disappear once we click the backdrop or the no button or the yes button
but there, we simply navigate to a different page which we haven't added yet anyways. So what I'll do
is, I'll set this back to display none, both for the backdrop and the modal and in the next lecture, we'll start
adding some Javascript to essentially change this display property whenever we want to show or hide
the modal and the backdrop.
So let's do that in the next lecture.