How to create a modal with HTML, CSS & JS - Part 3: JavaScript intro

Making something appear and disappear with JavaScript is pretty simple. So simple in fact, we don't need anything fancy like jQuery. This is done with vanilla javascript only, using ES6.

We just have to add and remove a class, so as to change its display property, which is fairly simple to do.

This video sets the stage for the next one, where things get a bit more complicated to get it to fade in and out, instead of just jumping in and out.

Also, don't be mad at me because I don't use semi-colons in my JS :)

---

---

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.

[frankkj]

You should definitely do more js tutorials if you find the time, you're a great teacher and explain everything clearly and concisely. There isn't many dedicated, and thoughtful web dev js tutorials on youtube, I think there's a real big target audience for those types of tutorials. Keep up the great work Kevin! You're doing an amazing job!

[segger]

Hi Kevin,

I have used this guide to build my first modal and it works great, thanks man and keep up the great work.

[craigcox]

Thanks for the tutorial Kevin, very helpful!
I have video content (iframes) within my modals, do you have any advice on how to stop them playing once the modal has been closed?

[pandanomsbamboo]

Hey Kevin,
If I were to change the more info link to a button, what is the query selector on JS? I'm using your responsive website example where you have used: "project info" button. Thank you and I love the videos!

please help, I want it will display when go to this page, don't need click

[codex_js]

Hello Kevin thanks for the awesome video. Noob question why do you need to use the ".closest()" ?

[UniversalDesignz]

Hi @Kevin I hope you and your family have been well.


It would be nice to see how to create a cookie disclaimer for the visitors with a
1. Visitor preference/manage to enable/disable the cookies.
2. On page load no cookies should get executed also it to be filtered out by cookies name to handle
3. Location intelligence e.g. only to show up in EU
4. A way to somehow keep a tab of what the visitor has choose

[litukas]

Code: const portfolioContainer =
portfolioContainer.addEventListener('click', e => {
console.log(e)
})


Error: main.js:47 Uncaught TypeError: Cannot read property 'addEventListener' of null
at main.js:47


Do you know how to fix it?

[bjartur]

If i put an <a> inside the modal I wont let me open it. any solution? i'm guessing it is because of the JS...

[auracular]

Hey Kevin, When I click "More Info" on a Portfolio item that does not have a modal, it does not direct to the link within my <a> tag unless I right click and say "open link in new window". In the console I get the error "Uncaught TypeError: Cannot read property 'querySelector' of null" do you know why this is occurring?

[arjunmarasini]

can I get the modal with document.getElementById instead of

[JonFuller]

I have a question

Why vanilla over jquery ?