Видео

good point. you can also add auto dismiss and call dismiss function after few seconds using setTimeout

You can check console to check the errors.

can you upload your code on git and share link or DM link on insta so that I can help to debug

@@Codingflag ahhhh no worries, i already solved the problem thankyou for responding tho.

@@SchoolBoyJoooooo so what's the fix?

@@Marcus_405 miss type variables in css, in messages i didnt type the 's' (message)

​@@SchoolBoyJoooooohow bro?

Glad it was helpful!

Thank you so much 😇

It is designed for small files like ~MB. If you want to transfer huge files then first upload it to server and download it from receiver’s end

@@Codingflag Can you please provide a video or instructions on how can I upload it to server?

yes. you can change it using index number in click listener in javascript

@@Codingflag one more question, i'm trying to make it responsive and almost done. but this indicator is not maintaining aspect ratio. its resizing across the breakpoints. any solution?

can you share your code on codepen or upload it on codepen and share link here

Thank you. You can checkout this video for the same. ruclips.net/video/YKPkDFs5DGY/видео.html Please let me know if any issues.

Thanks for the reply. I changed my code a lot since I saw this message. I am now having trouble adding multiple modals. Can you help me here is my code. JS: // Get the button that opens the modal var btn = document.querySelectorAll(".modal-button"); // All page modals var modals = document.querySelectorAll('.modal-container'); // Get the <span> element that closes the modal var spans = document.getElementsByClassName(".modal-exit"); document.addEventListener("DOMContentLoaded", () => { document.querySelector(".modal-button").addEventListener("click", function() { document.querySelector(".modal-container").classList.add("fade-in"); }) document.querySelectorAll(".modal-exit").forEach((elem) => { elem.addEventListener("click", () => { document.querySelector(".modal-container").classList.remove("fade-in"); }) }) }) CSS: .modal-container { visibility: hidden; display: flex; position: absolute; top: 0; left: 0; align-items: center; justify-content: center; width: 100%; height: 100vh; transition: all .2s linear; opacity: 0; .modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0 ,0, .5); } .modal { position: relative; width: 500px; height: 300px; //Styling background: #fff; border-radius: 5px; box-sizing: 0 3px 15px rgba(0, 0, 0, .5); display: flex; justify-content: center; align-items: center; font-family: "fot-rodin-pron", sans-serif; font-weight: lighter; text-align: center; span.modal-exit { position: absolute; top: 0px; right: 0px; font-weight: bold; font-size: 0px; } } .modal-exit { cursor: pointer; } } .fade-in { visibility: visible !important; z-index: 99; opacity: 1; } HTML: <!-- Button --> <button class="modal-button" href="Modal-1"> <div class="m-4 mb-12 grid gap-4 lg:grid-cols-4 sm:grid-cols-2"> <div class="min-h-[100px] rounded-lg shadow-lg"><img src="/assets/img/temp_02.png" alt=""></div> </div> </button> <!-- Button Content --> <div class="modal-container"> <div class="modal-overlay modal-exit"></div> <div class="modal"> <span class="modal-exit">&times;</span> <div class="bg-white bg-opacity-75"> <div class="min-h-[100px] rounded-lg shadow-lg"><img src="/assets/img/temp_02.png" alt=""></div> <div class="m-4 mb-12 grid gap-4 lg:grid-cols-1 sm:grid-cols-1"> <div class="relative max-w-lg"> <p class="mt-6 border-l-4 border-dotted px-4">Lorem ipsum dolor sit amet consectetur, adipisicing elit Cumque quidem id in consequuntur provident delectus dicta molestiae velit perferendis ab necessitatibus cum illum quod voluptatibus architecto similique</p> <div class="absolute top-0 -ml-1.5 h-4 w-4 rounded-full bg-gray-400"></div> </div> <div class="relative max-w-lg"> <p class="mt-6 border-l-4 border-dotted px-4">Lorem ipsum dolor sit amet consectetur, adipisicing elit Cumque quidem id in consequuntur provident delectus dicta molestiae velit perferendis ab necessitatibus cum illum quod voluptatibus architecto similique</p> <div class="absolute top-0 -ml-1.5 h-4 w-4 rounded-full bg-gray-500"></div> </div> <div class="relative max-w-lg"> <p class="mt-6 border-l-4 border-dotted px-4">Lorem ipsum dolor sit amet consectetur, adipisicing elit Cumque quidem id in consequuntur provident delectus dicta molestiae velit perferendis ab necessitatibus cum illum quod voluptatibus architecto similique</p> <div class="absolute top-0 -ml-1.5 h-4 w-4 rounded-full bg-gray-600"></div> </div> <div class="relative max-w-lg"> <p class="mt-6 border-l-4 border-dotted px-4">Lorem ipsum dolor sit amet consectetur, adipisicing elit Cumque quidem id in consequuntur provident delectus dicta molestiae velit perferendis ab necessitatibus cum illum quod voluptatibus architecto similique</p> <div class="absolute top-0 -ml-1.5 h-4 w-4 rounded-full bg-black"></div> </div> </div> </div> </div> </div> @@Codingflag

yes. for that you need to host it on server

But can I use vscode's server

no. In that case you can only use it for devices within your local network

Glad it helped

Any error on console? upload code on codepen and share the link so that I can help to debug

Any error on console?

You need to add fontawesome library to get this icon. <link rel="stylesheet" href="cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />