Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
It would be nice to be able to disable modal forms for mobile devices, as these do not necessarily play well together (depending on implementation).
You also mentioned this in comment #1 to #1859770: dev patch for alternate modal sizes - mobile landscape, text field size, size settings issues
Patch with a suggestion on how to approach this on it's way. :)
Comment | File | Size | Author |
---|---|---|---|
#1 | modal_forms-deactivate_for_mobile_devices-1914134-1.patch | 4.05 KB | sigveio |
Comments
Comment #1
sigveio CreditAttribution: sigveio commentedAttached is a patch which aims to add support for conditionally disabling Modal forms activation for mobile devices.
It supports detection via:
Browscap
Mobile detect
Two new configuration options are supplied in form of checkboxes:
- If Browscap is installed (and not Mobile detect), only the first field will be enabled (tickable)... and will apply to all forms of mobile devices detectable via that module.
- If Mobile detect is enabled, which supports more fine grained detection, this module will be used (and preferred over Browscap if both are installed). In this case the second field ('Disable modal forms for tablets') will also be enabled (tickable), and allow the administrator to disable Modal forms specifically for tablet devices. The first field will be reduced to control Modal forms activation only for phones and other non-tablet mobile devices (if there is such a thing).
The configuration field descriptions will adapt based on the Drupal install's mobile detection capabilities, and where needed offer information on which modules to install to enable the configuration options/features. See patch for details.
Had to throw this together quickly due to being squeezed on time; someone else will need to test and verify. Hopefully it will at least give you a starting point. :)
Comment #2
sigveio CreditAttribution: sigveio commentedSeems I forgot to change status, so here goes..
Comment #3
frjo CreditAttribution: frjo commentedThank you hoesi!
Will test this as soon as I have time. I think I can use the same solution in the Colorbox module as well. Modals and lightboxes really doesn't work well on mobile devices so it would be nice to have this feature.
Comment #4
sigveio CreditAttribution: sigveio commentedDid you get the chance to test this? :)
Comment #5
thsutton CreditAttribution: thsutton commentedSeems to function correctly for me. I suppose this is either going to have an impact on caching (or work incorrectly when cached)?
Comment #6
SocialNicheGuru CreditAttribution: SocialNicheGuru commentedif you set the screen size to scale and choose a value, the modal does fit within the mobile device screen.
Comment #7
sigveio CreditAttribution: sigveio commentedPerhaps, but modals are designed for reasonably large screen surfaces where they can get a decent amount of air around them, with the background page semi-visible, giving the user a feeling of "not leaving the page" while they interact with whatever dialogue you are displaying. On a small mobile device, such as a smart phone, modals are regarded as less ideal UI wise... because they will essentially have to take up all the screen real estate. This in turn takes away from the whole point of using the modal in the first place, and can result in user confusion instead of being a positive feature. They might for an example think they are on a new page, then hit the "back" button in their mobile browser and end up erasing the data they've entered on the page they were on prior to triggering the modal.
You also have the issue of scaling the content within the modal and making sure it's easy to interact with. Instead of displaying things within a modal which steals some of the already tiny real estate we have available on a smart phone... many prefer to instead disable the modals and display the page directly using a responsive layout which adapts sensibly to the screen resolution.
Comment #8
newtoidPatch works great, just what I needed, thank you :-)
Comment #9
Anonymous (not verified) CreditAttribution: Anonymous commentedThank you Hoessie for the patch, this was really an hair-pulling bug.
I eventually managed to get this working. Just have to style this for mobile devices!
R.
Comment #10
danithaca CreditAttribution: danithaca commentedThe patch above works on the server end. Another easy fix is to use client side code: remove ".ctools-use-modal" CSS class. Then "nojs" in URL will not get replaced by "ajax", thus not triggering modal ajax call. Example pseudo code: