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. :)

CommentFileSizeAuthor
#1 modal_forms-deactivate_for_mobile_devices-1914134-1.patch4.05 KBsigveio
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

sigveio’s picture

sigveio CreditAttribution: sigveio commented
FileSize
modal_forms-deactivate_for_mobile_devices-1914134-1.patch4.05 KB

Attached is a patch which aims to add support for conditionally disabling Modal forms activation for mobile devices.

It supports detection via:

Browscap

  • Detects mobile devices, both phones and tablets... without differentiating between the two.

Mobile detect

  • Is capable of detecting and differentiating between mobile phones and tablets.

Two new configuration options are supplied in form of checkboxes:

  • Disable modal forms for mobile devices.
  • Disable modal forms for tablets.

- 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. :)

sigveio’s picture

sigveio CreditAttribution: sigveio commented
Status: Active » Needs review

Seems I forgot to change status, so here goes..

frjo’s picture

frjo CreditAttribution: frjo commented

Thank 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.

sigveio’s picture

sigveio CreditAttribution: sigveio commented

Did you get the chance to test this? :)

thsutton’s picture

thsutton CreditAttribution: thsutton commented

Seems to function correctly for me. I suppose this is either going to have an impact on caching (or work incorrectly when cached)?

SocialNicheGuru’s picture

SocialNicheGuru CreditAttribution: SocialNicheGuru commented

if you set the screen size to scale and choose a value, the modal does fit within the mobile device screen.

sigveio’s picture

sigveio CreditAttribution: sigveio commented

if you set the screen size to scale and choose a value, the modal does fit within the mobile device screen.

Perhaps, 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.

newtoid’s picture

newtoid
he/him
Location Vancouver Island, B.C.
CreditAttribution: newtoid commented
Issue summary: View changes

Patch works great, just what I needed, thank you :-)

Anonymous’s picture

Anonymous (not verified) CreditAttribution: Anonymous commented

Thank 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.

danithaca’s picture

danithaca CreditAttribution: danithaca commented

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

// in your module's js file:
// test if the browser is on mobile. if so, execute the following code:
$('.ctools-use-modal').each(function() {
  $(this).removeClass('.ctools-use-modal');
});