D4mations.com

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

d4mer

, , , , , , , , , , ,

45 responses to “Create a Modal With HTML, CSS & JavaScript”

  2. 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.

  3. 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.

  5. 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?

  7. 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

  11. 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.

  16. 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!

  23. 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!

  25. 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">

  33. 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

  35. 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.

  37. 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

  41. 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.

  42. 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";

    });

  44. 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