More options for Modals

Feature Request
#1

Modals are such a useful feature and really well implemented in Wappler. However, there is potential to make them even more useful - in particular, if they could be draggable and resizeable. It would also be useful if there could be more options to choose the initial position of a modal.

I can thing of a number of uses for draggable modals - eg for displaying extra information temporarily or for floating windows in applications, where it would also be possible to interact with the rest of the page. With the default behaviour, where the position is fixed and obscures part of the page, these options are not feasible.

There is already an open request to make modals static, which would also be useful; it would be great to have them 1) as they are, 2) static (where clicking the backround doesn’t dismiss the modal and 3) draggable, where the background can be interacted with while the modal remains on screen.

Draggable Modal script
#2

Hello Tom,
The current modals in Wappler are the Bootstrap 4 Modals, so the options provided in the UI are the ones available in the Bootstrap 4 framework: https://getbootstrap.com/docs/4.3/components/modal/

#3

Hi Teodor,
I realise that. I was just suggesting that it would be useful if additional features were incorporated into Wappler’s implementation of modals.

#4

Hey Tom,
No close on click option has been added to the modals in Wappler 1.9.7

1 Like
#5

Thanks Teodor. It will be a very useful feature.

The release notes mentioned:

Split the component in basic Static Bootstrap 4 Modal and Dynamic Modal version with dynamic events events

I’m not sure what this means. I can only see the ‘Dynamic Modal’, which is perhaps all that’s needed, but I was curious about how the component is split. Also, if the modal component is separate from the default Bootstrap version, does it make it any more likely that my request/suggestion for a draggable modal might be feasible?

#6

Since the last version we renamed the Modal Component to: Dynamic Modal.
It includes all the dynamic attributes and events related to app connect.

Static Bootstrap 4 Modal is the standard modal (not the app connect component) which for example may be on your page if you copied the code from bootstrap 4 docs. It misses the dynamic attributes and events. If for some reason you have not inserted the modal using the App Connect panel, but just copied it, or it came on your page from some 3rd party template, you can convert it to an App Connect component by clicking the Make Dynamic Modal button:

Screenshot_22
Screenshot_22.jpg713×364 47.2 KB

#7

Thanks - that all makes sense.

1 Like