Modal positioning & centering based on content
nick_robillard - October 6, 2009 - 04:26
| Project: | Chaos tool suite |
| Version: | 6.x-1.x-dev |
| Component: | Code |
| Category: | task |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | needs review |
Description
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.
| Attachment | Size |
|---|---|
| ctools_resize_changes.patch | 4.77 KB |
#1
Just an FYI, you can see this in action on www.mothersclick.com
#2
Ok 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.
#3
Given 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).
#4
It 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 ).
#5
@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.