Hi all,
I made a tutorial on how to create a modal view with Bubble.
You can get the tutorial here: Modal View with Bubble Tutorial
About the tutorial
I’ll teach you how to create a modal view for mobile devices that is intuitive and fun to use. You’ll learn how to use draggable elements to handle swipe gestures. You’ll also learn how to include scrollable content within your modal view. The method doesn’t use any 3rd party plugins and works even on the free Bubble plan. You will get access to the Bubble editor and you’re free to copy and use the modal view in your own projects. Using such modals in your web app, PWA or native app provides a great user experience that is expected from all modern apps today. Not to mention that a good user interface is a requirement for passing the App Store review. After watching the tutorial, you will be able to design and implement similar native elements yourself.
If you’re not happy with the tutorial or it doesn’t cover what you expected, you can contact me for a full refund
In your video shared it looks like you are clicking on the bar in the modal to drag it up or down, but it also seems to be automatically closing or opening fully.
In your tutorial, do you cover how to slide the modal view up or down to make it as large or small as the users wishes, so that for instance it would remain at 50% of the page height if the user dragged it to that position?
Hey, it is closing automatically when you swipe it down or snapping to the top when you swipe it up.
However, in the tutorial, the first step is making a modal that stays where the user dragged it as you described and then workflows for snapping are added. So it is covered!
If you’re not happy with the tutorial or it doesn’t cover what you expected, you can contact me for a full refund
Hey, no custom code is required for that part.
There are 2 lines of javascript later in tutorial used for making the view scrollable and preventing background scrolling. Just to copy paste to html element, no need for coding.
@aniv Hey, I bought your video and it’s not working 100%.
I implemented the JS you provided to 3 of my Drag/Drop groups and its only working on one of them. I tried adding the JS to another HTML with different ID attributes and it still doesn’t work. Any idea why its only working on one of the Drag groups and not the other two?
