In this lesson, we're going to be creating an image Pop-Up window, so selecting an image on our page
is going to pop it up in a larger viewing area.
So, first of all, we need some images.
And the images that we're going to be use are coming from placeholder dotcom.
So it gives you the ability to add placeholder images, not really fancy, just very plain.
They give you the ability to create these very grayscale kind of generated images and you can also color
them up and add in some text to them.
So let's set those up.
And first of all, we need a div that's going to contain all of those.
We can we can call this div, give it a class of pop, and then inside let's add in our image.
So just using our image tag.
So we need to specify an image source.
I'm going to use this one here that I've got create a few more of these and that almost fit on that
line.
So let me add it and you can update the colors of these images.
This is a really useful website because it gives you the ability to kind of just get these placeholder
images, which are great when you're developing and you don't have the assets on hand.
And this can be image number three.
We don't need a whole lot of images for this example.
And we could add in even more images and all of the functionality is still going to be there.
So once they're sitting within this pop area, that's where we can have our images.
And all of the image is that are going to be sitting in there are going to have the same functionality
and we're going to attach that functionality with JavaScript.
Some of the other things that we need, we need another div.
And this is going to be essentially where we're going to show our images.
So where we've got our overlay.
So we're starting this out and we're going to be hiding it.
So updating it within the classes that this is going to be a hidden element, creating our overlay.
So this is what's going to overlay the rest of the content so we can darken that content.
And we're also going to close using JavaScript.
We're going to attach the ability to close our Pop-Up by clicking the overlay and as well as clicking
a close, that's our overlay.
We don't need to have any content.
And then just underneath, this is where we're going to actually place our image.
So this is where our output is going to go.
So within here, how you create a span and give this one a class of clothes.
So any element that we want to be able to close our pop up, we just give it a class of clothes.
And then lastly, we need an image that we need to add in here using JavaScript is how we're going to
add that image.
So essentially, that is our model that's going to pop up.
We also need to apply some styling.
So this one in this case, we are doing quite a bit of setup with the HTML and CSFs that's going to
this is just core functionality that we needed for our model and for our image.
So first, we've got a class of hide that we're using and within hyd we've got a property of display
none.
So we don't want to be able to see that particular Pop-Up.
So when we refresh it, we've got that element there, but we don't have anything sitting within it.
Let's update the overlay.
So adding in within the overlay, this is we want it full width, so whatever the width of the pages,
and we want to apply this darker color across that entire element.
Add our background and we're going to use it.
We're going to use our.
It's actually background color.
So updating that and using our G.P.A. so some of the older browsers might not be able to handle ARGA.
So let's keep that in mind.
What's Arga?
So it's red, green, blue and alpha and the alpha is a value of zero to one.
So the more we want to increase the transparency of it, the higher of a number that we can go or the
lower the number that we can do.
And we set this to position absolute.
And this gives us the ability to position it so we can set it at zero six top and left will be zero
as well.
So quick, do a refresh and for now I'm going to move that out while we're building that up.
So you see that we've got our overlay.
So that's showing up there.
We also need to handle some of our output area.
So let's update that.
So this is that one that we were looking at where we want to have our image.
So this is where the actual pop up is going to sit.
So let's give this output, give it a default, and we can do it as a percentage.
So it's more dynamic.
So do a 60 percent by 40 percent set background color for this one to white, and we'll position this
one absolute as well.
And we're going to position it off the top 50 percent and also left 50 percent.
So it looks like and then we can always move it around as well and we're going to overflow.
So we'll hide all of the overflow.
We'll add a Z index here.
So that is on top of the other elements so we can give it a Z index of.
One hundred, so see what that looks like.
So refresh, there's our model or pop up there.
Let's actually we're going to make it a little bit more over to the left.
So it should be 20 percent because, ah, with the 60 and then the top should also be 30.
So just make a quick adjustment there.
So now it's always going to be centered.
So no matter how big we make our screen, it's always going to be centered.
So that was because we're working off of a full hundred percent with of course, now let's add in our
image into it.
So selecting our output plus and all of the images that are going to be inside of that output class
setting to 100 percent.
So covers full and also setting a height to 100 percent will position this one absolute as well and
setting the top to zero and left to zero.
So it goes right to the corner.
So it's going to add in our image.
We also want to position our closing span.
So let's update that one as well.
So within our output, we've got a span well positioned, this one absolute as well.
So we have full control of where this particular span is sitting and we use a right.
So we're coming off of the right side and we can do five percent off of the right side, adding in the
Z index.
So this one should be a fairly large Z index and make it larger than the output so we can set that to
one, two, five, one or two, and we'll set the cursor two pointer and update the color to be white.
So do a quick refresh.
Actually, the color should be for now.
We'll make it black.
Can we?
We can always adjust this because we can't see it on the white background.
So we've got our X there to close our pop up image.
We've got our pop up image and we've got our model and everything.
Our overlay is all ready to go.
So we're ready to sort of essentially it.
We've set up all of our core HTML access that we need and now we're ready to move on to the JavaScript.
We're going to create all of that interaction and functionality.
So that's still to come in the next lesson, I'm just going to adjust this one back to display so we
can hide and show it using JavaScript.
So all of that is yet to come.
So go ahead and set up your own image gallery and we're going to attach to these images JavaScript functionality.