Create a Modal With HTML, CSS & JavaScript



In this video we will be creating a modal from scratch using HTML, CSS and JavaScript. You see these a lot with frameworks like Bootstrap but here we will create our own custom modal.

CODE: Code for this video

BECOME A PATRON: Show support & get perks!
http://www.patreon.com/traversymedia

ONE TIME DONATIONS:
http://www.paypal.me/traversymedia

FOLLOW TRAVERSY MEDIA:
http://www.traversymedia.com
http://www.facebook.com/traversymedia

http://www.instagram.com/traversymedia

COURSES & MORE INFO:
http://www.traversymedia.com

NEW DISCORD CHAT SERVER:
https://discord.gg/traversymedia

Original source

45 thoughts on “Create a Modal With HTML, CSS & JavaScript

  • May 15, 2020 at 08:50
    Permalink

    is there a benefit to using addEventListener for a click event instead of using onClick?

  • May 15, 2020 at 08:50
    Permalink

    Great video, I was trying to implement the modal by following the video, but the problem is when I click to open the modal it would close immediately in second. If I leave the display to flex or block in the css and click the close button it closes fine and open fine, but that mean it would have to be open on page load. Do you know what could cause that to happen? Please let me know how I can fix this problem. Many Thanks.

  • May 15, 2020 at 08:50
    Permalink

    Thanks to Brad. (Years later!) I would prefer that the outside click does not close the modal. I do not know what is considered "best practices" for UI regarding this.

  • May 15, 2020 at 08:50
    Permalink

    If there are multiple buttons like details button associated with every row of a list then only one button works, rest of them doesn't work. Is there any way to make individual button work dynamically?

  • May 15, 2020 at 08:50
    Permalink

    I have seen so many tutorials on Youtube but Travesty is one of the best… That is because the content and style of teaching is so unique, pace of learning is also perfect and overall you make it look so simple…… Thank you so much from India

  • May 15, 2020 at 08:50
    Permalink

    From the get go he has lost me…live server extension ????..fuck..how can putting a simple modal up with hyperlinks be so difficult…..thanks for nothing fucktard….

  • May 15, 2020 at 08:50
    Permalink

    I'm really proud of myself cuz I realized that the closeBtn problem was because "closeBtn was a class not an ID so it couldn't get it by Id. still feel like dog scientist doing JS though haha.

  • May 15, 2020 at 08:50
    Permalink

    What if the button and the modal is located in two different pages .. how do you get it to work? Because for me, it works on the current page but if I try to link to all the buttons in my project file (for example, all the login buttons on the entire site) it doesn't work please help stuck on it for a few days now.

  • May 15, 2020 at 08:50
    Permalink

    I have serious problem with nested <div> tags. I mean, why do we have so deep <div> tags wrapping around our things. Is there a rule of thumb to know how deep we should nest our <div> tags. Is there anyone who knows how to organize divs enlighten me please!

  • May 15, 2020 at 08:50
    Permalink

    You're amazing! Wonderfully clear walk-through and instruction — you've helped me make sense of a lot of these concepts. Absolutely great find. Fully appreciative!

  • May 15, 2020 at 08:50
    Permalink

    You are truly a great teacher. You're methodical and a calm when it comes to developing; allowing us to actually learn with you. Even when things don't go the way you think, we still learn from those moments because that would be something that we may do, as well. Thank you, sir. Looking forward to more videos!

  • May 15, 2020 at 08:50
    Permalink

    Greetings from Greece!!! Thank for the lesson!!! The following link destroys all my trys to make a modal! Why?
    <link rel="stylesheet" type="text/css" href="styles/bootstrap-4.1.2/bootstrap.min.css">

  • May 15, 2020 at 08:50
    Permalink

    Exactly what I wanted cause I seen it on so many sites but didn't know what this mini window was called

    thankfully googling "html popup window" led me to modal windows.

  • May 15, 2020 at 08:50
    Permalink

    Hey bro thanks for the awesome guide i always understand more when i watch your video 🙂 btw can you tell me how to make the modal box the one that will contain our content smaller cus no matter which width i mess with it does not change it stays in that bar like width 🙁 any way thanks for the awesome guide <3

  • May 15, 2020 at 08:50
    Permalink

    Watching that kind of videos is such a big deal.
    Tip: when Brad makes an Error (probably intentionally) it's better to pause and try to solve it yourself before him. I think this can help you learn way more better than waiting for solution. Good luck.

  • May 15, 2020 at 08:50
    Permalink

    Thanks for your all work, highly appreciate, regarding this video, if more than 1 popup box /model created the second one have all attributes while the first one could not close while clicking outside the box; mean if 5 created, fifth can be closed while clicking outside but 1 to 4 not closed while clicking out side; any suggestion; thanks

  • May 15, 2020 at 08:50
    Permalink

    I know this is an old video and you probably won't check the comments, but I've been seeing that browser home page a lot in your videos! Did you make it yourself? If so how did you do it? I would love to make one for myself and customize it.

  • May 15, 2020 at 08:50
    Permalink

    Edit, in case you want more: https://codepen.io/marinelc/pen/rXqOYQ
    //ES6 + close on escape key

    const modal = document.querySelector("#simpleModal");

    document

    .querySelector("#modalBtn")

    .addEventListener("click", () => (modal.style.display = "block"));

    document

    .querySelector(".closeBtn")

    .addEventListener("click", () => (modal.style.display = "none"));

    window.addEventListener("click", e => {

    if (e.target === modal) modal.style.display = "none";

    });

    window.addEventListener("keydown", e => {

    if (e.key === "Escape" && modal.style.display === "block")

    modal.style.display = "none";

    });

  • May 15, 2020 at 08:50
    Permalink

    Hi there, I am a beginner in web development, and I am trying to achieve a modal to pop up once the page has loaded, after a few seconds. How could i achieve this?

  • May 15, 2020 at 08:50
    Permalink

    how did you get that popup modal without putting a onclick="openModal()" eventlistner?
    <button id="modal-btn" onclick="openModal()" class="button">Click Here</button>

    <div id="my-modal" class="modal">

    <div class="modal-content">

    <div class="modal-header">

    <span class="close" onclick="closeModal()">&times;</span>

    <h2>Modal Header</h2>

    </div>

    <div class="modal-body">

    <p>This is my modal</p>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla repellendus nisi, sunt consectetur

    ipsa velit

    repudiandae aperiam modi quisquam nihil nam asperiores doloremque mollitia dolor deleniti quibusdam

    nemo

    commodi ab.</p>

    </div>

    <div class="modal-footer">

    <h3>Modal Footer</h3>

    </div>

    </div>

    </div>

Leave a Reply