Thanks for working with those of us that have asked for a UI for altering modal sizes. I was looking for something like this as the modal form I was using for my contact form wasn't working very well for responsive design. My initial problem was that on phones the modal was much too large and was strangely off-centered so was pretty much un-usable on phones (see screenshot mobile-portrait for an example). If you want to see it for yourself, go to http://bevelsmith.com and click on the contact us link in the primary navigation. For desktop it works great - for phones it is un-usable.

I updated my local environment using the 7-dev version that was patched with the UI changes. I have some comments about the UI and then some experiences to share:

Modal popup small, medium, and large could use some clarification (at admin/config/development/modal_forms, under Styles and Options). If you provide the viewport or size cutoff you used to determine what is 'small' 'medium' or 'large' it will make it much easier for users to decide what type and width/height they will assign for each of these options.

I first tried using the Type: Scale for each of 'small' 'medium' or 'large'. For large scale I set it to .4 x .3, for medium scale I set it to .6 x .5, and for small scale I set it to .8 x .6. The behavior is kind of unpredictable with these settings.

  • Mobile portrait (screenshot mobile-portrait-2) looks close, but it would be best if the fields were scaled to fit the size of the modal. It looks like the text area is scaled to fit the modal, but the text fields are not scaled.
  • It seems that depending on the orientation of the screen (portrait vs landscape) the width x height are changing, and for the mobile landscape the modal is no longer centered (screenshot mobile-landscape)

I next tried using the Type: Fixed and set it to small: 300x300, medium 400x400, large 500x500

  • From using these settings it appears even for mobile (320x480) the small size isn't triggered, because if I inspect the modal it is actually 400x400. There also seems to be the issue with mobile-landscape that the modal is no longer centered (see mobile-landscape-fixed)

So to summarize:

  • Just a bit more documentation on the settings at admin/config/development/modal_forms, under Styles and Options, would be very helpful as users want to determine what settings to use.
  • The text field (name, email) sizes should be set based on the size settings, right now it looks like only the text area (details/comments) sizes are being set.
  • Also, for landscape mode on mobile phones, the centering of the modal seems to be lost.
  • Unless I'm not understanding the small, medium, and large settings, I suggest that the small setting be used for mobile devices - it looks like right now on mobile devices only the medium setting is being picked up.
  • I tried to be clear hear, but there are a few things going on. Please let me know if you need any more clarification - would love to see this working.

    Support from Acquia helps fund testing for Drupal Acquia logo

    Comments

    frjo’s picture

    Category: bug » support

    The different sizes are simply that, ready made sizes that can be used when building links to open a modal. The optional JavaScript files that can rewrite existing links in to modal links for some selected forms also sets a modal size. If you want a form to open in another size simply create your own JavaScript to rewrite the links or build modal links directly. More info in the README.

    If I would do anything for mobiles with this module is would be to add a feature to completely disable modals on mobiles.

    kbrinner’s picture

    Agreed - thanks for taking the time to respond and I do see the necessary info in the README. It would be nice to disable this on mobiles - thanks for the handy module.

    frjo’s picture

    Status: Active » Fixed

    Status: Fixed » Closed (fixed)

    Automatically closed -- issue fixed for 2 weeks with no activity.