Create A Draggable Bottom Sheet Modal in HTML CSS & JavaScript | Bottom Sheet Modal in JavaScript

In this video, I've shown how to create a draggable bottom sheet modal that functions similarly to a Facebook modal using HTML, CSS, and JavaScript. This modal allows the user to view its contents, drag it up or down, and close it. It also works on touch-enabled devices like phone.
Download Source Codes From Here
www.codingnepalweb.com/dragga...
Hire me on Fiverr
www.fiverr.com/prakashahi
Follow me on Instagram
/ coding.np
Visit my website for helpful coding projects with source code
www.codingnepalweb.com
Timestamps:
0:00 Demo of Modal
1:17 HTML & CSS Start
7:50 JavaScript Start
8:15 Showing Modal on Button Click
10:24 Hiding Modal on Outside Click
11:08 Updating Modal Height on Mouse Move
19:35 Making Modal Touch-friendly
#javascript #html #css #javascriptprojects #js
Music Credit:
Ikson - We Are Free [Official]
• #83 We Are Free (Offic...
Miss You - LiQWYD
• Miss You - LiQWYD (No ...
Those Restless Nights - Artificial.Music
• Those Restless Nights ...
Ikson - Lights [Official]
• #32 Lights (Official)

[@TheLeonelStreet]

What an incredible job bro the truth is thanks for your contributions with these videos, keep it up, congratulations

[@CodingNepal]

Thanks bro

[@juma_alpha]

nice work really congratulate you...never have i ever thought of having such a feature in a web💯 +1 like from me

[@alstn113]

I got great inspirations, thanks you!

[@pertu_co]

Pretty good! Thanks

[@web2905]

Thank you very much, very cool, it helped me, only I did for React

[@antonyanbeatz]

Nice😊

[@studytogether6455]

Voice over would be really helpful
But this is nice too.
👍

[@AnasKhan-cz7hc]

nice

[@I_am_Boksoon]

Can i ask you something?
const newHeight = startHeight + delta /window.innerHeight * 100
Why did you multiply window.innerHeight by 100? And why did you divide the multiplied value with startHeight+delta?
please explain me

[@foloryx]

Hi, could you do a lesson on the system of adding friends?

[@hossamkamal2459]

can't we use drag event ? just asking :"D and ty bro

[@ramosandresc]

👍

Is possible to make a dialog on pc and bottom sheet on mobile

[@hosseinpanahy5358]

I followed step by step , but my bottom sheet isn't expanding when i drag it

[@sobitjon_mirzomurodov]

Не могу найти на сайте пожалуйста напишите точный адрес

[@dex_code_yt]

First

[@abhisaragarwal9084]

How can I use this in a website for readmore option and can we add more content according to the topic

[@CodingNepal]

You can simply put the html css js code of this bottom sheet and show it on the particular element event. And yes you can also add more content to this sheet.

[@abhisaragarwal9084]

@@CodingNepal thnx for your contribution to web development you are doing great 👍👍 😃😃 keep it up may you get 1 million subscribers

[@bhavikyadav2934]

please put its code on your website

[@Daily_problemsr]

Bro Ek Request hai Aap Google ads Ke Demo Code batao Jise Kisiko Bhi Pata na Lage ? Pleses Pleses Please

[@CodingNepal]

I didn't understand brother.

[@bhanakop6772]

Please voice over and explain

[@CodingNepal]

Sure, I'll think on it.

[@thechoosen4240]

Good job bro, JESUS IS COMING BACK VERY SOON; WATCH AND PREPARE