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)
Пікірлер: 27
What an incredible job bro the truth is thanks for your contributions with these videos, keep it up, congratulations
@CodingNepal
Жыл бұрын
Thanks bro
nice work really congratulate you...never have i ever thought of having such a feature in a web💯 +1 like from me
I got great inspirations, thanks you!
Pretty good! Thanks
Thank you very much, very cool, it helped me, only I did for React
Nice😊
Voice over would be really helpful But this is nice too. 👍
nice
Hi, could you do a lesson on the system of adding friends?
👍
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
Не могу найти на сайте пожалуйста напишите точный адрес
Is possible to make a dialog on pc and bottom sheet on mobile
can't we use drag event ? just asking :"D and ty bro
First
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
I followed step by step , but my bottom sheet isn't expanding when i drag it
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.
Not working properly on iPhone devices 😢😢
Please voice over and explain
@CodingNepal
Жыл бұрын
Sure, I'll think on it.
please put its code on your website
Good job bro, JESUS IS COMING BACK VERY SOON; WATCH AND PREPARE