How to create a modal with HTML, CSS & JS - Part 2: CSS

It's time to make the modal look good! I do a few fun things in this video, like looking at how we can make an element be wider than the container that it's inside of, as well as using object-fit on an image to limit it's height, without having it get squished.

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

[thewetfly]

This modal looks really professional. You're great!

[alwaseem]

Hi Kevin,
I know its too late but at 4:57 you used nth-of-type in order to avoid using multiple classes for header image ! the problem is nth-of-type is work with respect to the parent . so i faced a problem to set different image to the second model with this approach any suggestion on how to solve this issue ..

i used : .portfolio-header : nth-of-type (2) >>> but this work inside the same parent as nth child ?? Help plz

[nathancornwell]

have you ever used <dialog> html tag to make modals? That seems to be what they were created for but they seem difficult to style with transforms/animations because they automatically go to full screen mode...

[rajneesh]

Hey Kevin really helpful video, thank you very much.
I like the javascript explaination very much.
If you could make a series on pure JavaScript and functionalities of it, it will be really helpful.
Thanks again.

[Banalitude]

So helpful as always ! I really want to get better with modals so this is perfect ! Also, 19:28 cracked me up hahahha

[keithadams]

Hi Kevin.. Merry Xmas.
I have 3 issues with the modal. In the '.portfolio-modal', position set to "fixed", (1) background color is placed over the modal content.
(2)The content flows out of the bottom (not accepting the bottom margin of 2em).
(3) The 'overflow-y: scroll' does not create a scroll bar (only the content underneath scrolls).
Is there a way to change the background z-index in relation to the content within the same object? ...Or is the background tired of being overlooked and decided to step out.
Any help you can provide would be helpful.
My setup is MacBook Pro, iTerm, Brackets, Firefox.

[vesperannstas]

Hi Kevin, these are great tutorials! Where can I find the code for the SVG close icon? It seems to be cut off in this vid, and mine is turning out distorted. Thank you!

[LucasNascimento]

hey kevin, i really wish you could help me with something. I tried to replicate this modal in my project but only one thing is wrecking my brain lol. The svg, close, icon is stuck behind the modal. For no apparent reason. I tried messing up with the z-index but nothing seems to fix it. I replicated the same code that is in your github, and still not working. Do you have some idea about how could i have messed this up?

[JonFuller]

Hey thanks for these

Quick question what app did you design the website on. It looks like sketch but looks very different to mine

[LucasNascimento]

Duuude i just found out.. i'm sooo dumb... when you made the markup for the modal, i made all the other modals for all the portfolio-items. So it got stacked one on top of the other. The X icon was in the first modal, and the modal i was seeing was the 5th one. Got it? im not sure 'bout my english, im from Brazil lol... Either way, i'm finally going to watch the JS video now... omg that was frustrating haha