I've attached some tweaks I've made to js/modal.js and js/mc.js that help position and center the modal based on its loaded content (rather than relative to size of document).
The problem we ran into was caused by resize calls being made before the modal content was populated. So trying to position and center the modal based on its content's width and height wasn't working well at all. Resize calls now occur after content is loaded and populated. I also moved the resize code to a theme function to avoid duplicated code and to make it override-able.
I know that some things I've done can be done better/cleaner so this is only a guideline.
| Comment | File | Size | Author |
|---|---|---|---|
| #3 | ctools_596874.patch | 6.44 KB | Scott Reynolds |
| #2 | ctools_596874.patch | 6.44 KB | Scott Reynolds |
| ctools_resize_changes.patch | 4.77 KB | Nick Robillard |
Comments
Comment #1
m3avrck commentedJust an FYI, you can see this in action on www.mothersclick.com
Comment #2
Scott Reynolds commentedOk here is another pass at this. This feels cleaner, as its not a theme() function which just felt silly.
It is a bit of an extension of #596450: New CTools Command Loading where in that issue, we should have use the loading command for in the show() function instead of just putting the html in the modalContent.
It unifies all the 'resize' functions into the Drupal.CTools.modal.centerModal.
Comment #3
Scott Reynolds commentedGiven it another thought, I would rather attachBehaviors before centering the modal. This is because the size of the modal could change depending on the behaviors that are run. (elements could be hidden, things could be added etc).
Comment #4
ferdi commentedIt would be great to have some more flexibility on position, animation etc. For example, one could use the modal as a sliding window (slide in on open / slide out on close and have top=0 ).
Comment #5
Scott Reynolds commented@ferdi: While I don't disagree with you, it is out of scope. This issue is dealing with how the modal behaves. Prior to this patch, the modal centers itself on the screen relative to the size of the document. This here centers the modal relative to the size of the content and does so after the 'loading' is done.
Comment #6
merlinofchaos commented1) Right now when this is in place, the modal flies to the upper left and back to the center. This is not good.
2) This makes the modal much smaller in Panels, which causes it to feel cramped again. One of the reasons I expanded it to lock it to 80% of the screen size was to allow more space for forms. So this ends up making it seem small again, which is confusing. There probably needs to be some way to still allow it to be relative size OR this.
Comment #7
meba commentedI generally like this - I think it would be possible to override Drupal.CTools.Modal.centerModal in your custom code and therefore create a custom size? Then the default might be 80 % and you can override to position and center the modal based on its loaded content.
It would also solve #779594: cTools modal window size + my issue with resizing the modal.
Comment #8
dave reid