📱[Tutorial] Modal View for mobile devices

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 :blush:

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 :blush:

1 Like

Does it require custom code? I’m not very confident with custom code.

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.

1 Like